title: How do I Align three spans using CSS (no tables)
body: <p>I have this table in some code;</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;&lt;td align="left"&gt;One&lt;/td&gt;&lt;td align="center"&gt;Two&lt;/td&gt;&lt;td align="right"&gt;Three&lt;/td&gt;
      &lt;tr&gt;&lt;td align="left"&gt;One&lt;/td&gt;&lt;td align="center"&gt;Two&lt;/td&gt;&lt;td align="right"&gt;Three&lt;/td&gt;
      &lt;tr&gt;&lt;td align="left"&gt;One&lt;/td&gt;&lt;td align="center"&gt;Two&lt;/td&gt;&lt;td align="right"&gt;Three&lt;/td&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I would like to not use tables and do the alignment and such all in CSS. I tried;</p>
  
  <pre><code>&lt;span style="float:left;"&gt;One&lt;/span&gt;&lt;span style="margin-left:auto;margin-right:auto;"&gt;Two&lt;/span&gt;&lt;span style="float:right;"&gt;Three&lt;/span&gt;
  &lt;span style="float:left;"&gt;One&lt;/span&gt;&lt;span style="margin-left:auto;margin-right:auto;"&gt;Two&lt;/span&gt;&lt;span style="float:right;"&gt;Three&lt;/span&gt;
  &lt;span style="float:left;"&gt;One&lt;/span&gt;&lt;span style="margin-left:auto;margin-right:auto;"&gt;Two&lt;/span&gt;&lt;span style="float:right;"&gt;Three&lt;/span&gt;
  </code></pre>
  
  <p>Example would be trying to convert this data to CSS to align as the table would;</p>
  
  <pre><code>&lt;table&gt;    
  &lt;tr&gt;&lt;td align="left"&gt;Bob&lt;/td&gt;&lt;td align="center"&gt;Dingle&lt;/td&gt;&lt;td align="right"&gt;3923.33&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td align="left"&gt;Johann&lt;/td&gt;&lt;td align="center"&gt;Strauss&lt;/td&gt;&lt;td align="right"&gt;33.33&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td align="left"&gt;Skip&lt;/td&gt;&lt;td align="center"&gt;Skipperson&lt;/td&gt;&lt;td align="right"&gt;0&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But the text in the middle doesn't align correctly as its jagged (different lengths) and so are the left and right values. Seems this is madness and I am leaning towards <a href="http://giveupandusetables.com/" rel="nofollow noreferrer">"Just Use Tables"</a>. </p>