title: HTML and CSS for table-like 'Label - Value' alignment
body: <p>Okay this is embarrassing. I'm almost tempted to use TABLE but I think it's wrong.</p>
  
  <p>Basically, I have a page with a <code>fieldset</code>, that in "Edit Mode" has a bunch of inputs like so:</p>
  
  <pre><code>&lt;label for="txtName"&gt;Address&lt;/label&gt;
  &lt;textarea name="Name" id="txtName"&gt;
      1 The test
      AddressTown
      UK
  &lt;/textarea&gt;
  </code></pre>
  
  <p>When this page is in "Read Only" mode, the <code>textarea</code> turns into a span e.g</p>
  
  <pre><code>&lt;label&gt;Address&lt;/label&gt;
  &lt;span&gt;
      1 The test&lt;br /&gt;
      AddressTown&lt;br /&gt;
      UK
  &lt;/span&gt;  
  </code></pre>
  
  <p>I want to lay the label and value out in a tabular way so that each <code>label</code> is on the left with a fixed width and the <code>input</code> or <code>span</code> follows it like so:</p>
  
  <pre><code>---------------------------
  Name       1 the test
             AddressTown
             UK
  ---------------------------
  </code></pre>
  
  <p>This would be a no-brainer in a TABLE:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
      &lt;th style="width: 150px; vertical-align: top;"&gt;
          &lt;label&gt;Address&lt;/label&gt;
      &lt;/th&gt;
      &lt;td&gt;
          &lt;span&gt;
          1 The test&lt;br /&gt;
          AddressTown&lt;br /&gt;
          UK
          &lt;/span&gt;
      &lt;/td&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>However I have been trying to achieve this with CSS, using <code>float</code> on just the <code>label</code> and on both, but no matter what I try, I'm in one of the following scenarios:</p>
  
  <ul>
  <li>The second line of the <code>span</code> wraps below the <code>label</code></li>
  <li>The span starts directly beneath the <code>label</code></li>
  <li>I get a nice tabular layout <strong>BUT</strong> I have to specify the width of the span, which I don't want to do.</li>
  </ul>
  
  <p>Any ideas?</p>