Tijdlijn recht

.tijdlijnr {position: relative;}

.tijdlijnr > div 
  {
    border-right: 2px solid #aaa;
    left: 16px;
    position: absolute;
    top: 0px;
    height: 100%;
  }

.tijdlijnr > ul 
  {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
  }

.tijdlijnr li {margin-bottom: 8px;}
.tijdlijnr li:before {display: none;}
.tijdlijnr header {align-items: center; display: flex;}

.tijdlijnr header div 
  {
    background-color: rgb(170, 170, 170);
    border-radius: 100%;
    height: 32px;
    width: 32px;
  }

.tijdlijnr footer {margin-left: 48px;}
.tijdlijnr h2 {margin-left: 16px; flex: 1;}

echo "<div class='tijdlijnr'>";

echo "<div></div>";
	
echo "<ul>";

echo "<li>";;
echo "<header>";
echo "<div></div>";
echo "<h2>Title</h2>";
echo "</header>";
echo "<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime.</footer>";
echo "</li>";
	
echo "<li>";;
echo "<header>";
echo "<div></div>";
echo "<h2>Title</h2>";
echo "</header>";
echo "<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime.</footer>";
echo "</li>";
	
echo "<li>";;
echo "<header>";
echo "<div></div>";
echo "<h2>Title</h2>";
echo "</header>";
echo "<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime.</footer>";
echo "</li>";
	
echo "</ul>";

echo "</div>";