title: How do I line up input fields and their labels in a grid like manner with css?
body: <p>I'm trying to do something that must be relatively easy, but I've spent hours mucking around with this and I'm no getting to the answer.</p>
  
  <p>I need to layout some input fields and their layers on a grid (or like a table I guess) with </p>
  
  <pre><code>lable     input      label input
  label     input      label input
  </code></pre>
  
  <p>Because the input fields are different widths (and would look pretty crappy if they were all the same width) the best I've managed to get is</p>
  
  <pre><code>label     input    label  input
  label     logerinput    label  input
  </code></pre>
  
  <p>How do I line up the second set of labels and there inputs?</p>
  
  <p>I've made two classes for the labels </p>
  
  <pre><code>#dpi_form label { 
    display: inline-block; 
    width: 150px; 
    margin-left: 20px;
  }
  #dpi_form .right-label {
    display: inline-block;
    width: 150px;
    margin-left: 220px; 
  }
  </code></pre>
  
  <p>and the associated controls are</p>
  
  <pre><code>  &lt;label for="req_retailer_index_fld"&gt;Select the retailer*:&lt;/label&gt;&lt;select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content"&gt;&lt;option&gt;item 1&lt;/option&gt;&lt;option&gt;item 2&lt;/option&gt;&lt;/select&gt;
    &lt;label for="req_region_index_fld" class="right-label"&gt;Select the region*:&lt;/label&gt;&lt;select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content"&gt;&lt;option&gt;item 1&lt;/option&gt;&lt;option&gt;item 2&lt;/option&gt;&lt;/select&gt;&lt;br /&gt;
    &lt;label for="req_customer_type_index_fld"&gt;Select the customer type*:&lt;/label&gt;&lt;select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content"&gt;&lt;option&gt;item 1&lt;/option&gt;&lt;option&gt;item 2&lt;/option&gt;&lt;/select&gt;
    &lt;label for="req_meter_state_index_fldi" class="right-label"&gt;Select the meter state*:&lt;/label&gt;&lt;select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content"&gt;&lt;option&gt;item 1&lt;/option&gt;&lt;option&gt;item 2&lt;/option&gt;&lt;/select&gt;&lt;br /&gt;
  </code></pre>
  
  <p>within a div.</p>
  
  <p>I've tried absolute positioning, relative positioning, padding, all manner of right and left margins but still can't get the result I'm after.</p>
  
  <p>I can find heaps of stuff or vertical alignment of controls.. but nothing showing me how to do this one.</p>
  
  <p>Any clues please?</p>
  
  <p>Peter.</p>