Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    
     <div class='timeline' style='width:100%;position:relative'>
      
      
      <div class='one timeline-milestone'>
        <div class='timeline-label'>
          Label One
        </div>
      </div>
      
      <div class='two timeline-milestone'>
        <div class='timeline-label'>
          Label Two
        </div>
      </div>
      
      <div class='three timeline-milestone'>
        <div class='timeline-label'>
          Label Three
        </div>
      </div>
      
      <div class='four timeline-milestone'>
        <div class='timeline-label'>
          Label Four
        </div>
      </div>
    
    
    </div>
  
  
  </body>

</html>

// Code goes here

/* Styles go here */

.timeline{
  display: table;
}

.timeline-milestone {
  display: table-cell;
  height:10px;
  width: auto;
  text-align:right;
}

.one {
width:10%;  
}

.two {
width:15%;
}

.three {
width:50%;
}

.four {
  width:90%;
}