css - 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.

question from:https://stackoverflow.com/questions/5825861/how-to-make-text-input-box-to-occupy-all-the-remaining-width-within-parent-block

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>