<div class="timeline">
  <div class="timeline-item" data-number="1">
    <h3>Item name</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta consectetur odit qui laudantium ullam magni dignissimos minus iure suscipit eum.</p>
  </div>
  <div class="timeline-item"></div>
  <div class="timeline-item" data-number="2"></div>
  <div class="timeline-item">
    <h3>Item name</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta consectetur odit qui laudantium ullam magni dignissimos minus iure suscipit eum.</p>
  </div>
  <div class="timeline-item" data-number="3">
    <h3>Item name</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta consectetur odit qui laudantium ullam magni dignissimos minus iure suscipit eum. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta consectetur odit qui laudantium ullam
      magni dignissimos minus iure suscipit eum.</p>
  </div>
  <div class="timeline-item"></div>
  <div class="timeline-item" data-number="4"></div>
  <div class="timeline-item">
    <h3>Item name</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta consectetur odit qui laudantium ullam magni dignissimos minus iure suscipit eum.</p>
  </div>
  <div class="timeline-item" data-number="5">
    <h3>Item name</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta consectetur odit qui laudantium ullam magni dignissimos minus iure suscipit eum. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta consectetur odit qui laudantium ullam
      magni dignissimos minus iure suscipit eum.</p>
  </div>
  <div class="timeline-item"></div>
</div>
*, *:after, *:before {
  box-sizing: border-box;
}

body {
  padding: 10px;
  font-family: sans-serif;
}

.timeline {
  display: flex;
  flex-wrap: wrap;
}

.timeline-item {
  width: 50%;
  flex-shrink: 0;
  padding: 10px 40px;
  font-size: 12px;
  color: #333;
  position: relative;
  line-height: 1.4;
}

.timeline-item:nth-child(odd) {
  border-right: 2px solid #000;
  text-align: right;
}

.timeline-item:nth-child(odd):before {
  content: attr(data-number);
  position: absolute;
  width: 50px;
  height: 50px;
  right: -25px;
  top: 5px;
  background-color: #000;
  border: 2px solid #FFF;
  border-radius: 50%;
  color: #FFF;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-item h3 {
  font-size: 20px;
  padding-bottom: 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.