I have have a simple HTML form with say four input widgets (see below)...two lines with two widgets on each line. However, when this renders it is pretty ugly. I want the whole form to be indented from the edge of the left page say 40px and I want the left edge of the widgets to line up with each other and the right edge of the labels to line up. I also want to be able to specify a minimum distance between the right edge of the first widget and the label of the widget next to it. How would I do this using CSS? Basically so it looks something like:

            Name:  _____________     Common Names:  _____________
         Version:  ____________            Status:  ____________ 

See current un-formatted HTML below:

<form name="detailData">
<div id="dataEntryForm">
<label>
 Name:  <input type="text" class="input_text" name="ddName"/>  Common Names: <input type="text" class="input_text" name="ddCommonNames"><P>
 Version: <input type="text" class="input_text" name="ddVer"/>  Status:  <select name="ddStatus"><option value="A" selected="selected">Active</option><option value="P">Planned</option><option value="D">Deprecated</option>
</label>
</div>
</form>