title: Inserting tab spaces to align text vertically in HTML/CSS
body: <p>I am not sure how to get the following behaviour using a combination of HTML and CSS:</p>
  
  <pre><code>foo    = this
  foobar = bit
  goso   = needs
  etcetc = aligning
  </code></pre>
  
  <p>Now I could just insert spaces where required (like I did above), but I'm pretty sure there must be a way to do this "automatically".</p>
  
  <p><strong>I know I could use tables to do this, but would prefer not to.</strong> Is there any other way of doing this?</p>
  
  <p>My question boils down to this: <strong>How do I automatically align text vertically, in a similar way to tabs in office suites, using HTML/CSS.</strong></p>
  
  <p>Here is an in context example:</p>
  
  <pre><code>&lt;p&gt;&lt;span class="a"&gt;foo&lt;/span&gt; &lt;span class="b"&gt;=&lt;/span&gt; &lt;span class="c"&gt;"abcDeveloper"&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;&lt;span class="a"&gt;bar&lt;/span&gt; &lt;span class="b"&gt;=&lt;/span&gt; &lt;span class="c"&gt;"123"&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;&lt;span class="a"&gt;foobar&lt;/span&gt; &lt;span class="b"&gt;=&lt;/span&gt; &lt;span class="c"&gt;"dfg"&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;&lt;span class="a"&gt;foobarstar&lt;/span&gt; &lt;span class="b"&gt;=&lt;/span&gt; &lt;span class="c"&gt;"456"&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>In this example, I would like text in class b to be aligned vertically.</p>
  
  <p>Thank you in advance!</p>