title: CSS - Two Column Form
body: <p>I'm trying to reduce the amount of html markup related to presentation in my front end code.  In a form I'm currently working on, I want to have 2 column of form fields.  One way that will definitely do what I want is this:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {width:400px;}
  .col {width:200px; height: 100px; float:left; display:block;}
  label, input {display:block;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="col"&gt;
          &lt;label&gt;Field1:&lt;/label&gt;
          &lt;input&gt;
  &lt;/div&gt;
  &lt;div class="col"&gt;
          &lt;label&gt;Field2:&lt;/label&gt;
          &lt;input&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to achieve the same results when rendered in browser WITHOUT the div tags in the mark up.  So I did something like this:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {width:400px;}
  label,input {width:200px; height: 30px; float:left; display:block;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;label&gt;Field1:&lt;/label&gt;
          &lt;label&gt;Field2:&lt;/label&gt;
          &lt;input&gt;
          &lt;input&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is close, but I want the <code>&lt;label&gt;</code> markup tag to appear before each <code>&lt;input&gt;</code> markup tag in the code like so:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;label&gt;field1&lt;/label&gt;
  &lt;input&gt;
  &lt;label&gt;field2&lt;/label&gt;
  &lt;input&gt;
  </code></pre>
  
  <p>But problem here is that I can't think of maintainable css code that will make the label appear on top of each input field.  Is there a good way to make both the mark up and the rendered result appear the way I want to?</p>