title: How to align left and right align multiple lines in HTML?
body: <p>How do i left and right align text on multiple lines, e.g.:</p>
  
  <pre><code>┌─────────────────────────────────────┐
  │ Tums                                 29 │
  │ Oxydativedecarboxilization          ATP │
  │ appdata      C:\Users\Ian\AppData\Local │
  └─────────────────────────────────────┘ 
  </code></pre>
  
  <p>e.g.:</p>
  
  <blockquote>
    <p><img src="https://i.stack.imgur.com/61viy.png" alt="enter image description here"></p>
  </blockquote>
  
  <p><strong>Note</strong>: A single-line variant of this question has been asked before</p>
  
  <p>Here's a sample of some attempts i've found on SO and elsewhere, and the situations where left+right align was tried:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;HEAD&gt;
      &lt;TITLE&gt;Home Page&lt;/TITLE&gt;
      &lt;STYLE type="text/css"&gt;
          .left {
              float: left;
          }
          .right {
              float: right;
          }
      &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
      &lt;DIV&gt;
          &lt;P&gt;&lt;SPAN class='left'&gt;Tums&lt;/SPAN&gt;&lt;SPAN class='right'&gt;29&lt;/SPAN&gt;
          &lt;P&gt;&lt;SPAN class='left'&gt;Oxydativedecarboxilization&lt;/SPAN&gt;&lt;SPAN class='right'&gt;42&lt;/SPAN&gt;
          &lt;P&gt;&lt;SPAN class='left'&gt;appdata&lt;/SPAN&gt;&lt;SPAN class='right'&gt;C:\Users\Ian\AppData\Local&lt;/SPAN&gt;
      &lt;/DIV&gt;
  
      &lt;UL&gt;
          &lt;LI class='line1'&gt;&lt;P class='left'&gt;Tums&lt;P class='right'&gt;29
          &lt;LI class='line2'&gt;&lt;P class='left'&gt;Oxydativedecarboxilization&lt;P class='right'&gt;42
          &lt;LI class='line3'&gt;&lt;P class='left'&gt;appdata&lt;P class='right'&gt;C:\Users\Ian\AppData\Local
      &lt;/UL&gt;
  
      &lt;DIV&gt;
          &lt;P class='left'&gt;Tums&lt;P class='right'&gt;29
          &lt;P class='left'&gt;Oxydativedecarboxilization&lt;P class='right'&gt;42
          &lt;P class='left'&gt;appdata&lt;P class='right'&gt;C:\Users\Ian\AppData\Local
      &lt;/DIV&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>Which renders incorrectly as:</p>
  
  <blockquote>
    <p><img src="https://i.stack.imgur.com/EsUDM.png" alt="enter image description here"></p>
  </blockquote>
  
  <p>Desired rendering:</p>
  
  <blockquote>
    <p><img src="https://i.stack.imgur.com/61viy.png" alt="enter image description here"></p>
  </blockquote>
  
  <p><strong>Bonus reading</strong></p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/1639705/html-css-right-and-left-align-on-the-same-line">HTML/CSS - Right and left align on the same line?</a></li>
  <li><a href="https://stackoverflow.com/questions/3324694/cross-browser-css-for-left-align-and-right-align-on-the-same-line">Cross-browser CSS for left align and right align on the same line</a></li>
  </ul>