title: Creating form to have fields and text next to each other - what is the semantic way to do it?
body: <p>I want to create a form so there is text on the left side and the inputs on the right, currently I am doing</p>
  
  <pre><code>&lt;div id="labels"&gt;
  &lt;ul&gt;
  &lt;li&gt;The Label&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="inputs"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;input type="text /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>input[type=text] {
      height: 14px;
  }
  
  #labels {
      float: left;
  }
  
  #inputs {
      float: right;
  }
  
  li {
      padding-top: 4px;
      padding-left: 10px;
  }
  
  // Text size is 14px
  </code></pre>
  
  <p>What happens is that the text and fields are not aligned perfectly (the inputs get progressively lower as I add items). I am thinking this is because not all the inputs can be 14px (I use drop downs, checkboxes, radios, etc.).</p>
  
  <p>What would be the correct way to create this? I know a table would fix the problem but is that semantic?</p>