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

It works without flex and tables if assign float: right and put the button (or several buttons in reverse order) before the input box.

Then place the label with float: left, give the input box 100% width and wrap it inside a span with display: block and overflow: hidden.

No magic involved:

  clickme 2
  clickme 1
  label
  
    
  

The basic idea that all right side buttons are specified before the input box in the reverse order.