How to make text input w/button autosize within responsive div

Question

I am working with a website that is already responsive and works fine. I am trying to add a text input field with a button on the right and want the text input to autosize and the button to remain a fixed size.

The general HTML/CSS is:

<style>
  #container { width: 100%; }
  #text { float: left; }
  #btn { float: left; overflow: hidden; }
</style>

<div id="container">
  <div id="text"><input type="text" /></div>
  <div id="btn"><input type="submit" /></div>
</div>

A visual:

+---------------- container (autosize) --------------+
| +------------------------------------------------+ |
| |        text (autosize)        |       btn      | |
| +------------------------------------------------+ |
+----------------------------------------------------+

Desired behavior:

The container div will autosize depending on display width - this already gets handled. The btn div will size to exactly the width of the button - this already gets done also.

I would like the text input div to autosize with the text input to be 100% of the text div.

Is this possible? I think I've given enough info but am happy to provide any other details needed. I've been working on this for hours and am frustrated at this point.

EDIT

I may not have explained the desired behavior clearly enough.

#container width changes according to display width. This already happens perfectly. It can be 960px width all the way down to 320px width.

#btn is not a fixed width. It will be positioned all the way to the right margin of #container.

#text width needs to autosize to take up the entire width between #container's left and #btn's right margins.

Answer 1

I would use old school tables for this. The following should provide you a starting point:

a) Add a wrapper div that acts as table row:

<div id="container">
    <div id="temp">
        <div id="text"><input type="text" /></div>
        <div id="btn"><input type="submit" /></div>
    </div>
</div>

b) Set the divs to display as table, table-row and table-cell

#container {
    display: table;
    width: 100%;
}
#temp {
    display: table-row;
}
#text, #btn {
    display: table-cell;
}

c) Set the width of the first cell to 100%; this makes the cell as wide as possible while keeping the other cells as narrow as possible:

#text {
    width: 100%;
}

d) Set the input box to 100% as well:

#text input {
    width: 100%;
}

e) Improve.

Demo with ids replaced with classes