Vertical timeline component. Example: https://mattconn.github.io/timeline/

timeline.css

/* timeline event styles */
.timeline-event {
    display: flex;
}

.timeline-event .timeline-event_copy {
    padding: 0 1em;
}

.timeline-event .timeline-event_copy.current {
    background-color: #dedef9;
}

/*
Making this shape:

      |
 201x |-- Event
      |

There is a vertical line, and a horizontal line per event.
*/
/* vertical line */
.timeline-event .timeline-event_lines {
    border-left: 3px solid black;
}

/* horizontal line */
.timeline-event .timeline-event_lines div {
    border-bottom: solid 1px black;
    padding: 1em;
}
/* end timeline event styles */

timeline.html

<div class = "timeline-event">
    <div class="timeline-event_copy">
        <h1>2016</h1>
    </div>
    <!-- vertical and horizontal lines -->
    <div class="timeline-event_lines">
        <div>
        </div>
    </div>
    <div class="timeline-event_copy">
        <h1>Event Title</h1>
        <p>Event description.</p>
        <p>More event copy.</p>
    </div>
</div>