Pure CSS vertical timeline

Toggle class name on click in jQuery

HTML

<div class="timeline">
  <div class="line"></div>
 
 <div class="text-wrap">
 

    <div class="text">
     <div class="step"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauriit, eget viverra magna urna vitae elit. Morbi sodales sapien sed mauris dapibus, quis venenatis sapien varius. In quis odio at ligula bibendum iaculis. Curabitur ac tellus quam. Mauris commodo hendrerit neque, a ultricies felis feugiat eget.
      </p>
    </div>

    <div class="text">
      <div class="step"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut efficitur ex, tincidunt fermentum est. Nullam ac aliquet enim. Suspendisse potenti. Sed rhoncus nulla vel leo porttitor, eget convallis est ultrices. Vivamus pharetra, sapien a bibendum porttitor, ipsum purus posuere elit, eget viverra magna urna vitae elit. Morbi sodales sapien sed mauris dapibus, quis venenatis sapien varius. In quis odio at ligula bibendum iaculis. Curabitur ac tellus quam. Mauris commodo hendrerit neque, a ultricies felis feugiat eget.
      </p>
    </div>


    <div class="text">
      <div class="step"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut efficitur ex, tincidunt fermentum est. Nullam ac aliquet enim. Suspendisse potenti. Sed rhoncus nulla vel leo porttitor, eget convallis est ultrices. Vivamus pharetra, sapien a bibendum porttitor, ipsum purus posuere elit, eget viverra magna urna vitae elit. Morbi sodales sapien sed mauris dapibus, quis venenatis sapien varius. In quis odio at ligula bibendum iaculis. Curabitur ac tellus quam. Mauris commodo hendrerit neque, a ultricies felis feugiat eget.
      </p>
    </div>
    
 </div>
</div>

CSS

body { font-family:sans-serif; padding:50px; line-height:1.5em; }

.timeline { display:flex; }
.line  { width:32px; background: linear-gradient(0deg, rgba(0,255,255,1) 0%, rgba(0,0,255,1) 100%); position:relative; }

.text { font-size:14px; margin-left:40px; width:600px; position:relative; }

p { margin:0 0 20px; 0; }

.text:before{ content:''; position:absolute; bottom:-20px; left:-72px;
    width:4px; height:calc(100% - 12px);
    border-left:14px solid white;
}
.text:after{ content:''; position:absolute; bottom:-20px; left:-58px;
    width:4px; height:calc(100% - 12px);
    border-right:14px solid white;
}

.text:last-child:before{ border-left:32px solid white; }

.step { width:32px; height:32px; position:absolute; top:0; left:-72px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32px' height='32px'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M16,0H0v16C0,7.164,7.164,0,16,0z'/%3E%3Cpath fill='%23FFFFFF' d='M0,16v16h16C7.164,32,0,24.837,0,16z'/%3E%3Cpath fill='%23FFFFFF' d='M16,0c8.837,0,16,7.164,16,16V0H16z'/%3E%3Cpath fill='%23FFFFFF' d='M16,32h16V16C32,24.837,24.837,32,16,32z'/%3E%3C/g%3E%3C/svg%3E%0A");
}