HTML/CSS Two auto-width columns

Question

I'm having an incredibly difficult time achieving the following effect:

==========================================================
= Variable Width =  <input style="width: 100%" />        =
==========================================================

I am using the following HTML:

<dl>
  <dt>
    <label>Variable Width</label>
  </dt>
  <dd>
    <input style="width: 100%" />
  </dd>
</dl>

Please note that I've trimmed down the HTML for readability.

Can anyone suggest what CSS I should use to achieve this effect? I would prefer to not have to use display: table because I am looking for cross-browser compatibility that reaches IE7.

Answer 1

This is "incredibly difficult" to do without <table> or display: table.. until you know how!

See: http://jsfiddle.net/thirtydot/aLgwt/

This works in IE7 and greater + all modern browsers.

dt {
    float: left
}
dd {
    overflow: hidden;
    padding: 0 4px 0 9px
}
dd input {
    width: 100%
}

An explanation of why it works is here.