<div class="timeline">
  <div class="year">
    <div class="inner">
      <span>2016</span>
    </div>
  </div>
  
  <ul class="days">
    <li class="day">
      <div class="events">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
        <div class="date">18 October (Monday)</div>
      </div>
    </li>
    
    <li class="day">
      <div class="events">
        <p>Lorem dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
        <div class="date">18 October (Monday)</div>
      </div>
    </li>
    
    <li class="day">
      <div class="events">
        <div class="day__img">
          <img src="http://placehold.it/400x300" alt="" />
          <p class="caption">
            Lorem ipsum dolor sit amet.
          </p>
        </div>
        <div class="date">18 October (Monday)</div>
      </div>
    </li>
    
    <li class="day">
      <div class="events">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
        <div class="date">18 October (Monday)</div>
      </div>
    </li>
    
    <li class="day">
      <div class="events">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perferendis vitae, facere accusantium magni, explicabo mollitia quidem odio autem, iste optio? Consequuntur ratione dolorum velit maiores quam odit odio suscipit.</p>
        <div class="date">18 October (Monday)</div>
      </div>
    </li>
    
    <li class="day">
      <div class="events">
        <div class="day__img">
          <img src="http://placehold.it/400x300" alt="" />
          <p class="caption">
            Lorem ipsum dolor sit amet.
          </p>
        </div>
        <div class="date">18 October (Monday)</div>
      </div>
    </li>
  </ul>
  
  <div class="year year--end">
    <div class="inner">
      <span>2017</span>
    </div>
  </div>
</div>

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
  font-family: georgia;
}
*, *:before, *:after {
  box-sizing: inherit;
}

img {
  max-width: 100%;
}

.timeline {
  text-align: center;
  
  .year {
    display: inline-block;
    font-size: 36px;
    font-weight: bold;
    position: relative;
    
    span {
      display: inline-block;
      padding-bottom: 6px;  
    }
    
    &:after {
      content: "";
      display: block;
      width: 80%;
      margin: auto;
      height: 1px;
      background: green;
    }
    
    &--end {
      
      &:before {
        content: "";
        display: block;
        width: 80%;
        margin: auto;
        height: 1px;
        background: green;
      }
      
      &:after {
        content: none;
      }
    }
  }
  
  .days {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    .day {
      width: 100%;
      float: left;
      
      .events {
        position: relative;
        float: left;
        border-right: 1px solid green;
        padding: 30px;
        text-align: right;
        width: 50%;
        
        &:after {
          content: "";
          width: 40%;
          display: inline-block;
          height: 1px;
          background: green;
          
          position: absolute;
          right: 0;
        }
        
        .date {
          position: absolute;
          top: 50%;
          left: 100%;
          transform: translateY(-50%);
          
          padding: 30px;
          text-align: left;
          
          color: green;
          font-size: 24px;
          white-space: nowrap;
        }
        
        .day__img {
          margin-right: -30px;
          position: relative;
          overflow: hidden;
          
          img {
            display: block;
            float: right;
          }
          
          .caption {
            position: absolute;
            margin: 0;
            
            bottom: 0;
            right: 0;
            padding: 20px;
            background: rgba(#000, 0.7);
            color: #fff;
          }
        }
      }
      
      &:nth-child(odd) {
        .events {
          width: calc(50% + 1px);
          float: right;
          border-right: 0;
          border-left: 1px solid green;
          text-align: left;
          
          &:after {
            right: auto;
            left: 0;
          }

          .date {
            left: auto;
            right: 100%;
            text-align: right;
          }
          
          .day__img {
            margin-right: auto;
            margin-left: -30px;

            img {
              float: left;
            }

            .caption {
              right: auto;
              left: 0;
            }
          }
        }
      }
    }
  }
}