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

how achieve following:

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

• label aligned left
• button aligned right
• text-box occupies remaining width within parent
• paragraph aligned left, must left-aligned label too

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

please advise.

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/