CSS: Force textarea to ocuppy all available area

Question

I'm working on a form with an horizontal layout:

 <div id="container">
  <label for="ta">description</label>
  <textarea id="ta" name="ta" cols="50" rows="10"></textarea>
 </div>

The problem is that what I want is the textarea take up all available space that the label leaves in the same line. If I try with width=100% it jumps to the next line:

div * {
    vertical-align: middle;
}
textarea {
    width: 100%;
    height: 300px;
}

Any idea to implement it without assign a fixed space to each tag?

Answer 1

Like this? http://jsfiddle.net/4QbMr/

<div id="container">
    <label for="ta">description</label>
    <div class="twrap"><textarea id="ta" name="ta" cols="50" rows="10"></textarea></div>
</div>

label {
    float: left
}
.twrap {
    overflow: hidden;
    padding: 0 4px 0 12px
}
textarea {
    width: 100%;
    height: 300px;
}

Answer 2

For table-like behaviour with CSS, display: table is your friend:

#container {
    display: table;
    width: 100%;
}
#container label, #container textarea {
    display: table-cell;
    vertical-align: top;
}
#container textarea {
    width: 100%;
    height: 300px;
}

Note that if you specify cols and rows attributes, they will override your CSS.