title: Styling a form where the input fields have implicit labels (wrapped in labels)
body: <p>Given an html form like this:</p>
  
  <pre><code>&lt;form action='/example/' id='example_form' method='POST' name='example_form'&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Example form&lt;/legend&gt;
      &lt;label for='age'&gt;
        Age
        &lt;input id='age' name='age' tabindex='1' type='text' /&gt;
      &lt;/label&gt;
      &lt;label for='gender'&gt;
        Gender
        &lt;select id='gender' name='gender' tabindex='2'&gt;
          &lt;option disabled='disabled' id='gender' name='gender' value=''&gt;Choose one:&lt;/option&gt;
          &lt;option id='gender_female' name='gender' value='female'&gt;Female&lt;/option&gt;
          &lt;option id='gender_male' name='gender' value='male'&gt;Male&lt;/option&gt;
        &lt;/select&gt;
      &lt;/label&gt;
      &lt;label for='height'&gt;
        Height
        &lt;input id='height' name='height' size='3' tabindex='3' type='text' /&gt;
      &lt;/label&gt;
      &lt;label for='weight'&gt;
        Weight
        &lt;input id='weight' name='weight' size='4' tabindex='4' type='text' /&gt;
      &lt;/label&gt;
      &lt;input id='Save' tabindex='5' type='submit' value='Save' /&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p>How would you style it to get the classic table based layout of label to the left, field to the right, everything aligned vertically? Tables are obviously out of the question. I can't find anything on how to do this with <strong>implicit</strong> labels and just CSS. </p>
  
  <p>If the answer is to <em>not</em> wrap the fields then so be it, but I'd prefer if a solution could be found for this as:</p>
  
  <ol>
  <li>This is generated html.</li>
  <li>I keep reading about how using implicit labels improves accessibility.</li>
  </ol>
  
  <p>Any help/pointers/insight will be much appreciated.</p>