JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="timeline">
  <li class="timeline__item">
    <div class="timeline__text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, ex est cum ducimus eaque doloremque
    </div>
    <div class="timeline__side-line">
      <svg class="timeline__side-spacer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>
    </div>
  </li>

  <li class="timeline__item">
    <div class="timeline__text">
      obcaecati, repellat corporis consequuntur molestias quaerat. Quidem perspiciatis praesentium dolorum nemo dolorem delectus dignissimos, est aliquam sit facilis quia cumque laborum earum assumenda ullam voluptate architecto quasi iste culpa natus maiores
      explicabo.
    </div>
    <div class="timeline__side-line">
      <svg class="timeline__side-spacer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>
    </div>
  </li>

  <li class="timeline__item">
    <div class="timeline__text">
      dolorem delectus dignissimos, est aliquam sit facilis quia cumque laborum earum assumenda ullam voluptate architecto quasi iste culpa natus maiores explicabo. Quibusdam
    </div>
    <div class="timeline__side-line">
      <svg class="timeline__side-spacer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>
    </div>
  </li>

  <li class="timeline__item">
    <div class="timeline__text">
      soluta illum rerum, quae praesentium, veritatis aspernatur neque asperiores voluptatem error esse! Sequi quisquam quod doloribus mollitia max
    </div>
    <div class="timeline__side-line">
      <svg class="timeline__side-spacer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>
    </div>
  </li>

  <li class="timeline__item">
    <div class="timeline__text">
      a in praesentium, accusamus, nesciunt blanditiis eos explicabo ullam saepe delectus dolorem. Optio accusamus illo, qui!
    </div>
    <div...

CSS

*, *::before, *::after {
  box-sizing: border-box;
}

.timeline {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: number;
}

.timeline__item {
  position: relative;
  width: 50%;
  padding: 25px 10px;
}

.timeline__item::before {
  content: counter(number);
  counter-increment: number;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  line-height: 1;
  z-index: 1;
}

.timeline__item:nth-child(odd) {
  margin-right: 50%;
}

.timeline__item:nth-child(odd)::before {
  right: -2rem;
}

.timeline__item:nth-child(even) {
  margin-left: 50%;
}

.timeline__item:nth-child(even)::before {
  left: -2rem;
}

.timeline__side-line {
  position: absolute;
  top: -1px;
  height: calc(100% + 2px);
  border: 2px solid red;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
}

.timeline__side-line::before {
  position: absolute;
  width: 14px;
  height: 14px;
  content: "\f04b";
  font: normal normal normal 14px/1 FontAwesome;
  text-align: center;
  color: royalblue;
  top: 85.355%;
  left: 85.355%;
  transform: translate(-50%, -50%) rotate(135deg);
}

.timeline__side-spacer {
  width: auto;
  height: 100%;
}

.timeline__item:nth-child(odd) .timeline__side-line {
  right: 0;
  transform: translateX(50%) rotate(-45deg);
}

.timeline__item:nth-child(even) .timeline__side-line {
  left: 0;
  transform: translateX(-50%) rotate(135deg);
}