<div class="timeline">
  <div class="timeline__item timeline__item--left">
    <h1 class="timeline__title">Timeline Item 1</h1>
    <p class="timeline__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium necessitatibus sed, eligendi consequatur, doloribus eos, itaque corrupti odit quas officiis nobis consequuntur incidunt voluptatibus obcaecati adipisci saepe quo. Animi, et.</p>
  </div>
  <div class="timeline__item timeline__item--right">
    <h1 class="timeline__title">Timeline Item 2</h1>
    <p class="timeline__text">Distinctio, rem corporis maiores quisquam quod velit sed enim illo quidem pariatur quasi iste? Non voluptate eveniet sint ratione beatae. Saepe quod nihil quis dolorum velit, nostrum illum pariatur quos?</p>
  </div>
  <div class="timeline__item timeline__item--right">
    <h1 class="timeline__title">Timeline Item 3</h1>
    <p class="timeline__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, adipisci magni maxime, vitae illo ab ullam sequi, repellat beatae non consectetur voluptate perferendis iusto praesentium ea doloribus magnam delectus dignissimos.</p>
  </div>
  <div class="timeline__item timeline__item--left">
    <h1 class="timeline__title">Timeline Item 4</h1>
    <p class="timeline__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae quidem veritatis aliquam harum qui impedit, eius laudantium commodi accusamus distinctio minima voluptatum cupiditate sequi, modi, necessitatibus doloribus obcaecati illo libero.</p>
  </div>
</div>

:root {
  --primary-color: #efc13b;
}

body {
  margin: 0;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
  background: var(--primary-color);
}

.timeline {
  --dot-size: 32px;
  --dot-background: #111111;
  --dot-color: #ffffff;
  --line-width: 4px;
  --space: 60px;
  --margin: 20px;

  padding: 20px;
  display: flex;
  flex-direction: column;
  counter-reset: timeline;
}

.timeline__item {
  position: relative;
  padding: 20px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2),
          0 4px 4px rgba(0, 0, 0, 0.15),
          0 8px 8px rgba(0, 0, 0, 0.1),
          0 16px 16px rgba(0, 0, 0, 0.05);
  counter-increment: timeline;
}

.timeline__item::before,
.timeline__item::after {
  position: absolute;
}

.timeline__item::before {
  top: calc(var(--margin) * -1);
  width: var(--line-width);
  height: calc(100% + var(--margin) * 2);
  background: var(--dot-background);
  content: '';
}

.timeline__item::after {
  top: calc(50% - var(--dot-size) / 2);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: var(--dot-background);
  color: var(--dot-color);
  box-shadow: 0 0 0 2px var(--primary-color);
  content: counter(timeline);
}

.timeline__item:first-child::before {
  top: calc(50% - var(--dot-size) / 2);
}

.timeline__item:last-child::before {
  bottom: calc(50% - var(--dot-size) / 2);
}

.timeline__item:first-child::before,
.timeline__item:last-child::before {
  height: calc(50% + var(--dot-size) / 2 + var(--margin));
}

.timeline__item:not(:last-child) {
  margin-bottom: var(--margin);
}

.timeline__item--left {
  margin-right: calc(50% + var(--space) / 2);
}

.timeline__item--left::before {
  right: calc(var(--space) / -2 + var(--line-width) / -2);
}

.timeline__item--left::after {
  right: calc(var(--space) / -2 + var(--dot-size) / -2);
}

.timeline__item--right {
  margin-left: calc(50% + var(--space) / 2);
}

.timeline__item--right::before {
  left: calc(var(--space) / -2 + var(--line-width) / -2);
}

.timeline__item--right::after {
  left: calc(var(--space) / -2 + var(--dot-size) / -2);
}

.timeline__title {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.timeline__text {
  margin: 0;
  line-height: 1.5;
}