<p>I want the following layout to appear on the screen:</p>

<pre><code>FieldName 1             [Field input 1]
FieldName 2 is longer   [Field input 2]
    .                         .
    .                         .
FieldName N             [Field input N]
</code></pre>

<p>Requirements:</p>

<ul>
<li>Field names and field inputs must align on the left edges</li>
<li>Both columns must dynamically size themselves to their content</li>
<li>Must work cross-browsers</li>
</ul>

<p>I find this layout extremely simple to do using HTML tables, but since I see a lot of CSS purists insisting that tables only be used for tabular data I figured I'd find out if there was a way to do it using CSS.</p>

FieldName objects should be contained in SPANs with style attributes of float: left and a width that is wide enough for your labels.
Inputs should be contained within a span styled to float: left. Place a
```
<div style="clear: both"/>
```
or
```
<br/>
```
after each field input to break the floating.
You may enclose the aforementioned objects into a div with the width style attribute set that is wide enough for both labels and inputs, so that the "table" stays small and contained.
Example:
```
```
<span style="float: left; width: 200px">FieldName1</span><span style="float: left"><input/><br/>

<span style="float: left; width: 200px">FieldName2</span><span style="float: left"><input/><br/>

<span style="float: left">FieldName3</span><span style="float: left"><input/><br/>
```
```