title: How to solve form aligning without tables when I have multiple rows and want to align the left column right and the right column left
body: <p>I'm looking for a solution for the following, aspect: I have a table with two columns (cols). The left col contains form labels, the right col contains inputs. In order to have a good UI experience, I want to align these cols next to each other (left col align right | right col align left). Now I try to solve this without tables, because forms are no table data. The big advantage of tables is:</p>
  
  <ol>
  <li>table-cols take automatically the space they need, so the left column is automatically as wide as the widest label</li>
  <li>in multiple rows I have no problem of losing the row</li>
  </ol>
  
  <p>The following picture is showing my problem:
  <a href="http://i.stack.imgur.com/75Ehm.png" rel="nofollow">http://i.stack.imgur.com/75Ehm.png</a></p>
  
  <p>So is there a solution which follows the following conditions?:</p>
  
  <ul>
  <li>no Javascript</li>
  <li>left col/div is taking max. the width of the widest label</li>
  <li>no row conflicts like in the picture</li>
  </ul>