JSFiddle - React, Tailwind, and code Playground

HTML

<div class="line"></div>
<ul class="list">
 <li>
  <div class="dot"></div>
  <p class=written>First thing</p>
 </li>
 <li>
  <div class="dot"></div>
  <p class=written>Second thing</p>
 </li>
 <li>
  <div class="dot"></div>
  <p class="written">Third thing</p>
 </li>
</ul>

CSS

body {
 font-family:helvetica, sans-serif;
}

.line {
 background-color:red;
 height: 150px;
 width:1px;
 float:left;
 position: relative;
 left: 57px;
 top:20px;
}

.list{
 display:inline-block;    
 position: relative;
 list-style-type:none;
}
.written{
 width:200px;
 position: relative;
 top: 5px;   
}

.dot{
 border: 1px solid blue;
 border-radius: 20px;
 width: 20px;
 height: 20px;
 float:left;
 margin: 5px;
}