CSS table - Expand input box the entire length without wrapping to new line

Question

I have a form with elements structured as so:

<div>
   <label>Name</label>
   <input type="text" name="name" />
</div>

<div>
   <label>Address</label>
   <input type="text" name="address" />
</div>

The way I want it to look is, the label is positioned next to the input box and the input box expands to fit the entire container. If I set a manual width on the input box, in pixels, then not each box is the same length.

If I try to set the width to 100% then the input boxes wrap to a new line in order to expand the entire width.

How can I get the labels (who's width is variable) to be position to the left of the input boxes and have those input boxes expand to fit their containing div?

Here's my current CSS:

#content form input
{
   border: none;
   height: 23px;
   position: relative;
   top: -1px;
   left: -5px;
   padding-top: 5px;
   text-indent: 10px;
   display: inline-block;
}  

#content form label
{
   background: #c6c9c0 url('../images/form-label-bg.jpg') no-repeat center right;
   height: 28px;
   line-height: 30px;
   display: inline-block;
   text-indent: 15px;
   padding-right: 25px;
   color: #6a6a6a;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 8pt;
}

Answer 1

I don't think its possible even using the tables because all 'columns' in a table will also have equal width.

You have to manually define widths for inputs I suppose. Use % instead of px, though.

Answer 2

try this:

form div {
 display: table;
 width: 100%;
}
label,
input { 
 display: table-cell;
}
label{ 
 width: 200px;
}
input {
 width: 100%;
}