Expand search div to the button - html

Question

I've HTML structure like following
<div class="box-search-select">
<div class="search-left">
<input id="search" type="text">
</div>
<button type="submit" class="button">Search</button>
<div style="clear:both"></div>
</div>
and CSS as following
.box-search-select{
width:100%;
padding:20px 0;
}
.search-left{
float:left;
width: 90%;
}
.search-left input{
width:100%;
}
button{
float:right;
}
Output : (Normal screen size)
I want to expand "search-left" div width to the Search button.
Which should work properly for fluid responsive layouts too.
Here I've created fiddle if you wish to play : https://jsfiddle.net/j7g8143a/1
Now if I decrease the width of screen then the search button move to next line like following picture
but I want the "search-left" div to automatically adjust it's width according to screen size like following picture.
I need only CSS solution without using any media queries
EDIT: It should have to be compatible with IE9.

Answer 1

Here is your solution with demo and it will be work on IE9 also:
<div class="box-search-select">
<div class="search-left">
<input id="search" type="text">
</div>
<button type="submit" class="button">Search</button>
</div>
.box-search-select {
padding: 20px 68px 20px 0; /* give padding-right equal to button witdh */
position: relative;
}
.search-left input {
display: block;
width: 100%;
}
button {
background: #cccccc none repeat scroll 0 0;
border: 1px solid #dddddd;
padding: 1px;
position: absolute;
right: 0;
top: 20px;
width: 60px;
}
Demo:
https://jsfiddle.net/0u83dbm7/

Answer 2

You can use Flexbox
.box-search-select {
display: flex;
align-items: center;
}
.search-left {
flex: 1;
}
input {
width: 100%;
}
<div class="box-search-select">
<div class="search-left"><input id="search" type="text"></div>
<button type="submit" class="button">Search</button>
</div>
You can also use CSS tables
.box-search-select {
display: table;
}
.search-left,
button {
display: table-cell;
vertical-align: middle;
}
.search-left {
width: 100%;
}
input {
width: 100%;
}
<div class="box-search-select">
<div class="search-left"><input id="search" type="text"></div>
<button type="submit" class="button">Search</button>
</div>

Answer 3

Its gonna work I think
<div class="box-search-select">
<div class="search-left" style="width:80%">
<input id="search" type="text">
</div>
<button type="submit" class="button">Search</button>
<div style="clear:both"></div>
</div>
<style>
#search{
width:100%;
}
.box-search-select{
width:100%;
padding:20px 0;
}
.search-left{
float:left;
width: 90%;
}
.search-left input{
width:100%;
}
button{
float:right;
}
</style>
please let me know if this is not the expected output.

Answer 4

Put your input and button inside the div and use display:flex
.box-search-select{
padding:20px 0;
float:left;
width:100%
}
.search-left{
float:left;
width:100%;
display:flex;
}
.search-left input{
width:100%
}
button{
float:right;
}
<div class="box-search-select">
<div class="search-left">
<input id="search" type="text">
<button type="submit" class="button">Search</button>
</div>
<div style="clear:both"></div>
</div>