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                           


        

Answer 1

Don't forget, you can use calc(). Let's assume total of width used by label and button is 100px (including margin), then the width is:

.text-box {    
  width: calc(100% - 100px);
}

If you think it doesn't support a lot of browser, well you are wrong indeed. It supports a lot now. Time has changed