title: Inline form fields with labels placed on top
body: <p>I can't believe I'm having to ask this, but I'm at my wit's end. </p>
  
  <p>I'm trying to display 2 form fields inline, but with the label for each field on the top.  In ascii art:</p>
  
  <pre><code>Label 1      Label 2
  ---------    ---------
  |       |    |       |
  ---------    ---------
  </code></pre>
  
  <p>Should be pretty simple.</p>
  
  <pre><code>&lt;label for=foo&gt;Label 1&lt;/label&gt;
  &lt;input type=text name=foo id=foo /&gt;
  
  &lt;label for=bar&gt;Label 2&lt;/label&gt;
  &lt;input type=text name=bar id=bar /&gt;
  </code></pre>
  
  <p>This will get me:</p>
  
  <pre><code>        ---------           ---------
  Label 1 |       |   Label 2 |       |
          ---------           ---------
  </code></pre>
  
  <p>To get the labels on top of the boxes, I add display=block:</p>
  
  <pre><code>&lt;label for=foo style="display:block"&gt;Label 1&lt;/label&gt;
  &lt;input type=text name=foo id=foo /&gt;
  
  &lt;label for=bar  style="display:block"&gt;Label 2&lt;/label&gt;
  &lt;input type=text name=bar id=bar /&gt;
  </code></pre>
  
  <p>After I do this, the labels are where I want them, but the form fields are no longer inline:</p>
  
  <pre><code>Label 1  
  ---------
  |       |
  ---------
  
  Label 2  
  ---------
  |       |
  ---------
  </code></pre>
  
  <p>I've been unable to find a way to wrap my html so the fields display inline. Can anyone help?</p>