How to make multiple inline-block elems to stretch full width of the container?

block, css, html

Solution

I like the answer of ScottS, but just to have an alternative: you could use table-like behaviour in CSS:

CSS

.formline{
    display: table;
}
.txt{
    display: table-cell;
    width: 100%;
}
input[type=text]{
    -moz-box-sizing: border-box; box-sizing: border-box;
    width: 100%;
}​

HTML

<div class=formline>
    <div class=txt>
        <input type=text>
    </div>
    <input type=submit value=submit>
</div>

http://jsfiddle.net/willemvb/VaFSP/

Problem

What is the best way to implement input field and button behavior as displayed here:

Original source