Giving text input the remaining width - css

Question

I have a label, input and button one line. The width of the label and button are dynamic, they take the width of the text they contain. The label is aligned to the left, and the button to the right.
I want the button to be aligned to the far right, and the input in the middle take up all the remaining space.
I put a float: right on the button, but if I put the width of the input to 100% it goes to the next line and acts like a block element.
What would be the best / easiest way to realize what I'm trying to do here? This is a little bit tricky for me. I'm not sure what to do.
label {
margin-right: 10px;
}
input[type=text] {
width: 355px; /*100% doesnt work*/
height: 20px;
padding: 5px 10px;
}
input[type=text]:focus {
outline: 0;
}
button {
margin-left: -1px;
float: right;
vertical-align: bottom;
}
<fieldset class="last">
<label for="place">Any text here:</label>
<input type="text" id="place" value="Test value">
<button>Click</button>
</fieldset>
JSFiddle Demo

Answer 1

Here's a bit of a hacky way to do it:
table {
width: 100%;
}
.fixedText {
width: 1px;
white-space: nowrap;
}
.relativeText {
width: 100%;
}
#place {
width: 100%;
}
<table>
<tr>
<td class="fixedText">
<label for="place">Any text here:</label>
</td>
<td class="relativeText">
<input type="text" id="place" value="Test value">
</td>
<td class="fixedText">
<button>Click</button>
</td>
</tr>
</table>

Answer 2

Just to show you that you can also do it without tables (although I would probably go for the display: table-cell).
First float the label and the button to the left and right. Add a wrapper around the input. The wrapper gets overflow: hidden which creates a new block formatting context, see http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ for background information. In short this allow the wrapper to take up the remaining space.
Afterwards we apply some fixes to the padding, box-sizing, height and line-height to make it all look good again.
label {
height: 40px;
line-height: 40px;
margin-right: 10px;
float: left;
}
.wrapper {
overflow: hidden;
}
input[type=text] {
width: 100%;
height: 40px;
padding: 5px 10px;
box-sizing: border-box;
}
input[type=text]:focus {
outline: 0;
}
button {
margin-left: -1px;
float: right;
}
<fieldset class="last">
<label for="place">Any text here:</label>
<button>Click</button>
<div class="wrapper"><input type="text" id="place" value="Test value"></div>
</fieldset>