Как сверстать данную секцию?

*{ 
  box-sizing:border-box; 
} 
body{ 
  margin:0; 
  background-color:#555; 
} 
.container{ 
  position:relative; 
  color:#fff; 
} 
.container:before{ 
  content:''; 
  display:block; 
  position:absolute; 
  top:0; 
  left:50%; 
  height:100%; 
  border-left:1px solid; 
} 
.element{ 
  width:calc(50% - 10px); 
  height:100px; 
  background-color:#cda; 
  position:relative; 
} 
.element:nth-child(2n){ 
  margin-left:auto; 
} 
.element:before{ 
  content:''; 
  display:block; 
  width:10px; 
  height:10px; 
  background-color:#555; 
  border:2px solid; 
  border-radius:50%; 
  position:absolute; 
  top:calc(50% - 5px); 
  right: -18px; 
} 
.element:nth-child(2n):before{ 
  right:auto; 
  left:-17px; 
} 
.element:nth-child(3):before{ 
  width:18px; 
  height:18px; 
  right:-22px; 
}

<div class="container"> 
  <div class="element"></div> 
  <div class="element"></div> 
  <div class="element"></div> 
  <div class="element"></div> 
</div>