title: How do I make the below UI completely responsive
body: <p><a href="https://i.stack.imgur.com/IUkVn.png" rel="nofollow noreferrer">Please take a look at this design</a></p>
  
  <p>Below is my html, currently only for 2 legs/flights but I should be able to design for upto 5 legs.</p>
  
  <p>For now, I've given a percentage width to the lines in between, the rest of the elements have a fixed widths.</p>
  
  <pre><code>&lt;div class="roster-steps"&gt;
  
                                  &lt;span class="roster-points"&gt;DOH&lt;/span&gt;
                                  &lt;span class="roster-meta-bottom-step-one font-size-065"&gt;E17 MAR 10:30&lt;/span&gt;
                                  &lt;span class="fa  fa-circle-thin fa-lg"&gt;&lt;/span&gt;
  
                                  &lt;span class="o-arrow"&gt;&lt;hr class="hr-custom-three"&gt;&lt;/span&gt;
  
                                  &lt;span&gt;&lt;i class="fa fa-plane roster-points" &gt;&lt;/i&gt;&lt;/span&gt;
                                  &lt;span class="roster-meta-step2-top font-size-065"&gt;QR 2345 A360&lt;/span&gt;
                                  &lt;span class="roster-meta-bottom-step-two font-size-065"&gt;10:30 hrs&lt;/span&gt;
                                  &lt;span class="roster-meta-bottom-step-twosub font-size-065"&gt;&lt;span class="two-sub1" &gt;OP&lt;/span&gt;&lt;span class="two-sub2"&gt;B&lt;/span&gt;&lt;/span&gt;
  
                                  &lt;span class="arrow-o"&gt;&lt;hr class="hr-custom-three" &gt;&lt;/span&gt;
  
                                  &lt;span class="fa  fa-circle-thin fa-lg"&gt;&lt;/span&gt;
                                  &lt;span class="roster-points"&gt;LHR&lt;/span&gt;
                                  &lt;span class="roster-meta-bottom-step-three font-size-065"&gt;&lt;i class="fa fa-plane"&gt;&lt;/i&gt; E17 MAR 16:30&lt;/span&gt;
                                  &lt;span class="roster-meta-bottom-step-threesub font-size-065"&gt;&lt;i class="fa fa-plane fa-rotate-90"&gt;&lt;/i&gt; E17 MAR 17:30&lt;/span&gt;
                                  &lt;span class="fa  fa-circle-thin fa-lg"&gt;&lt;/span&gt;
  
                                  &lt;span class="o-arrow"&gt;&lt;hr class="hr-custom-three" &gt;&lt;/span&gt;
  
                                  &lt;span&gt;&lt;i class="fa fa-taxi roster-points" &gt;&lt;/i&gt;&lt;/span&gt;
                                  &lt;span class="roster-meta-step4-top font-size-065"&gt;TAXI&lt;/span&gt;
                                  &lt;span class="roster-meta-bottom-step-four font-size-065"&gt;1:30 hrs&lt;/span&gt;
                                  &lt;span class="roster-meta-bottom-step-foursub font-size-065"&gt;&lt;span class="four-sub1" &gt;DH&lt;/span&gt;&lt;/span&gt;
  
                                  &lt;span class="arrow-o"&gt;&lt;hr class="hr-custom-three" &gt;&lt;/span&gt;
  
                                  &lt;span class="fa  fa-circle-thin fa-lg"&gt;&lt;/span&gt;
                                  &lt;span class="roster-points"&gt;LGW&lt;/span&gt;
                                  &lt;span class="roster-meta-bottom-step-one font-size-065"&gt;E17 MAR 20:00&lt;/span&gt;
  
                              &lt;/div&gt;
  </code></pre>
  
  <p>Any guidance in the right direction is highly appreciated.</p>
  
  <p>Edit:</p>
  
  <p>Can't make it vertical now as the design team has signed off on this.</p>
  
  <p>So it was super easy doing this with css grid layout:</p>
  
  <p><a href="https://codepen.io/anon/pen/ryPzzE" rel="nofollow noreferrer" title="Codepen link">Check it out</a></p>
  
  <p>Note: To view it in chrome You need to  turn on the experimental flag.
  First load the chrome://flags URL and scroll down to the option to Enable     experimental Web Platform features</p>
  
  <p><strong>But since css grid layout is still not supported in major browsers, is there a more reliable alternative?</strong></p>
  
  <p>Thanks.</p>