Two div's, first auto-adjust, second fixed width - css

Question

I'm trying to make a simple subscription form, which consists of two elements:
Textbox - Floated left, fills up remaining space.
Button - Floated right, 100px width.
The problem is I can't get the textbox to fill up the remaining width.
.container
{
width: 100%;
}
.input-field
{
float: left;
}
.button
{
float: right;
width: 100px;
}
<div class='container'>
<input class='input-field'/>
<div class='button'>Subscribe</div>
</div>
http://jsfiddle.net/7nyY7/136/
For some reason the textbox is not stretching till the start of the button.
So I tried a different approach and used tables, this is exactly what I'm trying to accomplish, BUT the problem is whenever I add padding to the button and input, they both overflow each other:
http://jsfiddle.net/B46wu/111/
Is it possible to make the textbox end right where the button starts, regardless if the padding is present or not?
Because of the design, I need the textbutton and button to be exactly next to each other. Is this possible without JS? Thanks!

Answer 1

The best way is to use Flexbox...apply flex:1 to the input to get the remaining space
Stack Snippet
.container {
display: flex;
}
.input-field {
flex: 1;
}
.button {
width: 100px;
background: red;
color: white;
text-align: center;
}
<div class='container'>
<input class='input-field' />
<div class='button'>
Subscribe
</div>
</div>
And if you want to use float solution you will need to set the width of input is equal to calc(100% - 100px)
.container {
width: 100%;
}
.input-field {
float: left;
}
.button {
float: left;
width: 100px;
background: red;
color: white;
text-align: center;
}
input {
width: calc(100% - 100px);
box-sizing: border-box;
}
.container:after {
content: "";
display: table;
clear:both;
}
<div class='container'>
<input class='input-field' />
<div class='button'>
Subscribe
</div>
</div>

Answer 2

You can apply display: flex to the container, and add the flex-grow property to the textbox, which will make it grow to fill the remaining space.
You can read up on flexbox here
.container {
width: 100%;
display: flex;
}
.input-field {
background-color: red;
opacity: 0.5;
flex-grow: 1;
}
.button {
width: 100px;
background-color: blue;
opacity: 0.5;
}
<div class='container'>
<input class='input-field' />
<div class='button'>
Subscribe
</div>
</div>

Answer 3

For Accessibility use proper HTML as in the html below buttons instead of
<div class='button'>
Subscribe
</div>
.container{
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
/*This makes the immediate children into flex items*/
display: flex;
}
.input-field {
/*This will span out the whole width minus the 100px for the button*/
flex: 1;
}
button {
/*Set button width*/
width: 100px;
padding: 5px 20px
}
<div class='container'>
<input class='input-field' />
<button class='button'>Subscribe</button>
</div>