How to make search field responsive - css

Question

I'm attempting to add a search field to a responsive sidebar, and want the field to responsively scale to the width of the sidebar, while keeping the 'submit' button at a set width, on the same line as the search field.
I've been able to mock up the effect with divs, but when applying the same styles to the form elements, the search field will always fill the full width of the form element:
http://dabblet.com/gist/5618200
I am aware that I can get this to work with percentages:
http://dabblet.com/gist/5618209
But I really would like the 'submit' button to have a set width.
What can I do to make the form behave -exactly- like the div mockup in my first example?

Answer 1

Not getting your question well, but do you want the text box to be width 100% and a fixed button like this?
Demo
<input type="submit" value="Search" />
<div>
<input type="text" />
</div>
input[type=submit] {
float: right;
}
input[type=text] {
width: 100%;
}
div {
overflow: hidden;
padding-right: .5em;
}

Answer 2

Here is a fully functional solution.
<form>
<div class="form-element textfield">
<input type="text">
</div>
<div class="form-element submit-btn">
<input type="submit" value="Search">
</div>
</form>
And the styles:
.form-element {
display: table-cell;
box-sizing: border-box;
}
.textfield {
width:100%
}
.textfield > input {
width:100%
}
Here is the example:
http://codepen.io/capynet/pen/vJBnL