title: column layout for html form using css
body: <p>I need to create horizontal form where each field appearing under its label and form basically column format where label and field appear in one column.
  I tried using it with table format but it doesn't go well with dynamic forms where I don't know the number of fields and label that will be present in form. </p>
  
  <p>I searched and found
  <a href="https://stackoverflow.com/questions/13040031/html-columns-or-rows-for-form-layout">HTML columns or rows for form layout?</a>
  First approach gives with the horizontal layout but field and label don't appear aligned in column format.</p>
  
  <pre><code>.field-row {
   overflow: hidden;
  }
  .field-row span {
  display: block;
  width: 30%;
  float: left;
  }
  .field-row .field-container {
   width: 70%;
   float: left;
  }
  
  &lt;div class="field-row"&gt;
  &lt;span&gt;Field 1&lt;/span&gt;
  &lt;span&gt;Field 2&lt;/span&gt;
  &lt;span&gt;Field 3&lt;/span&gt;
  &lt;div class="field-container"&gt;
      &lt;input type="text"/&gt;
      &lt;input type="text"/&gt;
      &lt;input type="text"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="http://jsfiddle.net/aBeF8/" rel="nofollow noreferrer">jsFiddle</a> for above code.</p>
  
  <p>Is it even possible to achieve this just divs or table is the only way?</p>
  
  <p><strong>[Edit]</strong> Sorry, for missing this in original question.</p>
  
  <p>The label row needs to have a border around it in order to make it appear as single row.
  That is the reason I kept all the labels in one div so that this style can be applied to the div.
  Updated jsFiddle for the output expected</p>
  
  <p><a href="http://jsfiddle.net/aBeF8/7/" rel="nofollow noreferrer">http://jsfiddle.net/aBeF8/7/</a></p>