title: Best way to structure a two column html form?
body: <p>What is the best way to align the following?</p>
  
  <p>I want the <code>.inputTitle</code> on the left and the <code>inputInput</code> on the right with the error inbetween them both.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.crud_form{
      width:430px;
      margin:10px solid;
      font-family:Verdana, Geneva, sans-serif;
      background:orange;
  }
  .inputTitle{
      float:left;
      clear:left;
      margin:11px 10px 10px 0;
      width:95px;
      background:green;
  }
  .inputRequired{
      float:left;
      margin:5px;
      width:113px;
      background:blue;
  }
  .inputError{
      float:left;
      margin:10px;
      background:red;
  }
  
  .crud_form select textarea{
      float:left;
      clear:both;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form action="#" method="post" accept-charset="utf-8" class="crud_form" enctype="multipart/form-data"&gt;
  &lt;span class="inputTitle"&gt;First Name&lt;/span&gt;&lt;span class="inputInput"&gt;&lt;input type="text" name="first_name" value="" id="first_name"  /&gt;&lt;/span&gt;&lt;span class="inputError"&gt;&lt;/span&gt;
  
  &lt;span class="inputTitle"&gt;Last Name&lt;/span&gt;&lt;span class="inputInput"&gt;&lt;input type="text" name="last_name" value="" id="last_name"  /&gt;&lt;/span&gt;&lt;span class="inputError"&gt;&lt;/span&gt;
  
  &lt;span class="inputTitle"&gt;Address&lt;/span&gt;&lt;span class="inputInput"&gt;&lt;textarea name="address" cols="40" rows="10" id="address" &gt;&lt;/textarea&gt;&lt;/span&gt;&lt;span class="inputError"&gt;&lt;/span&gt;
  
  &lt;span class="inputTitle"&gt;Phone&lt;/span&gt;&lt;span class="inputInput"&gt;&lt;input type="text" name="phone" value="" id="phone"  /&gt;&lt;/span&gt;&lt;span class="inputError"&gt;&lt;/span&gt;
  
  &lt;span class="inputTitle"&gt;Item&lt;/span&gt;&lt;span class="inputInput"&gt;&lt;select name="item" id="item"&gt;
  &lt;option value="Caps cost $15"&gt;&lt;/option&gt;
  &lt;option value="Mugs cost $20"&gt;&lt;/option&gt;
  &lt;option value="Childrens T-shirts, sizes 0 to 6"&gt;$10&lt;/option&gt;
  &lt;option value="Ladies (no photo) cost $20"&gt;&lt;/option&gt;
  &lt;option value="Men cost $20"&gt;&lt;/option&gt;
  &lt;/select&gt;&lt;/span&gt;
  
  &lt;span class="inputError"&gt;&lt;/span&gt;
  &lt;span class="inputTitle"&gt;Comments&lt;/span&gt;&lt;span class="inputInput"&gt;&lt;textarea name="comments" cols="40" rows="10" id="comments" &gt;&lt;/textarea&gt;&lt;/span&gt;&lt;span class="inputError"&gt;&lt;/span&gt;
  
  &lt;input type="submit" value="Save" /&gt;
  
  &lt;/form&gt;
  </code></pre>