How to make text input box to occupy all the remaining width within parent block?

Question

How do achieve the following:

┌────────────────────parent────────────────────┐ │ label [text-box                   ] [button] │ │ paragraph                                    │ └──────────────────────────────────────────────┘ 

• label is aligned to the left
• button is aligned to the right
• text-box occupies all remaining width within parent
• paragraph is aligned to the left, must be left-aligned with label too

Both label and button should obey font properties defined elsewhere as maximum as possible. parent is center-aligned within window, and, naturally, can have arbitrary width.

Please advise.

Answer 1

Updated [Oct 2016]: Flexbox version...

form {    display: flex;  }  form input[type="text"] {    flex: 1;  }

<form>    <label>Name</label>    <input type="text" />    <button>Submit</button>  </form>  <p>Lorem ipsum...</p>

Original answer [Apr 2011]: Table-less CSS version (of table behavior)...

<div id="parent">     <div id="inner">         <label>Name</label>         <span><input id="text" type="text" /></span>         <input id="submit" type="button" value="Submit" />     </div>     <p>some paragraph text</p> </div> 

CSS...

#inner {     display: table;     width: 100%; } label {     display: table-cell; } span {     display: table-cell;     width: 100%;     padding: 0px 10px; } #text {     width: 100%; } #submit {     display: table-cell; } 

Demo: http://jsfiddle.net/wdm954/626B2/4/