How to make a conjoined input with flexible width - css

Question

I want to make a conjoined input (left-aligned text input on the same line as a right-aligned button). Something like this:
But it want to have flexible width (the combined inputs should stretch to 100% of the parent container width, which can be of any width. Particularly, the text input should stretch to use all available space on the line).
I tried:
button float:right with text input width:100% (this overflows onto 2 lines)
text input width: calc(100% - 90px) (almost works, but button width varies on each browser)
Code example with JSFiddle:
HTML:
<div class="conjoined-input">
<input type="button" value="Update">
<input type="text">
</div>
CSS:
.conjoined-input {
width: 500px;
border: 1px solid red;
}
.conjoined-input input[type="text"] {
/*width: 100%;*/
}
.conjoined-input input[type="button"] {
float: right;
}
I need only modern browser support (IE9+) and can use any HTML and CSS.
How do I make a conjoined input with flexible width

Answer 1

very easy using flex:
DEMO
.conjoined-input {
width: 500px;
border: 1px solid red;
display: flex;
}
.conjoined-input input[type="text"] {
width: 100%;
}
IE9 is happy?
DEMO2
so, wrap your input in a div.
<button>Search</button>
<span><input type="text" title="Search" /></span>
then apply the magic styles
.conjoined-input {
width: 500px;
overflow: hidden;
background-color: yellow;
border: 1px solid red;
}
.conjoined-input input[type="text"]{
width: 100%
}
.conjoined-input span {
display: block;
overflow: hidden;
padding-right:10px;
}
.conjoined-input button{
float: right;
}