A searchbox using select and input for older browsers(no flexbox) - css

Question

I want to create a search box, by using a select and an input.
I have 2 issues:
I want the search input to fill all the remaining space(see the grey background);
Select and input to be connected, no space between them(because of DOM space)
Because I need to work older IE, I can't use flexbox or grid; I tried also float.
Looking for a solution where select and input width is flexible, not fixed;
I tried a trick, (in comments, width: 1%) that sometimes works, but not with select;
.searchbox {
display: table;
width: 500px;
background-color: grey;
}
select, .form-group{
display:table-cell;
margin:0;
}
/*select {
width:1%;
space:nowrap;
}*/
<div class="searchbox">
<select>
<option>Abras</option>
<option>Brat</option>
</select>
<div class="form-group">
<input placeholder="Search" name="q""/>
<span>icon_placeholder</span>
</div>
</div>

Answer 1

According to this float: will not work in IE9, but if you use -ms- it should work in IE10 +. I was reading around and although the website I listed said it's not supported in IE9 im finding articles of people being able to use it. Let me know if you have any issues with the following code.
img {
width: 100%;
height: 100%;
}
.wrapper {
overflow: hidden;
width: 100%;
max-width: 500px;
}
.left {
float: left;
-ms-float: left;
overflow: hidden;
}
.options {
width: 75px;
}
.search {
width: calc(100% - 110px);
}
.image {
width: 35px;
height: 35px;
}
.style {
padding: 8px;
margin: 0;
}
.full {
width: calc(100% - 25px);
}
<div class="wrapper">
<div class="left options">
<select class="left style">
<option>Abras</option>
<option>Brat</option>
</select>
</div>
<div class="left search">
<input class="style full" placeholder="Search" name="q" />
</div>
<div class="left image">
<img src="https://seeklogo.com/images/C/company-leaf-and-flames-logo-2ECEE07FDD-seeklogo.com.png" alt="img" />
</div>
</div>

Answer 2

Changing the display for the select to display: inline-block; aligns everything to the left.
This won't center align the fields vertically if you choose to change the height later, but I think it solves your problem.
select, .form-group {
display: inline-block;
margin: 0;
}

Answer 3

You can float the select and then turn the .form-group div into a block formatting context, doing this will make it respect the floats position and fill the remaining space making it dynamic. See the demo below and click here to read more about block formatting contexts
.searchbox {
display: table;
width: 500px;
background-color: grey;
}
/* select, .form-group{
display:table-cell;
margin:0;
} */
select {
float: left;
}
.form-group {
overflow: auto;
}
input {
width: 100%;
box-sizing: border-box; /* keep box model properties subtracted from width not added */
}
<div class="searchbox">
<select>
<option>Abras</option>
<option>Brat</option>
</select>
<div class="form-group">
<input placeholder="Search" name="q"/>
<span>icon_placeholder</span>
</div>
</div>
There are many ways to turn an element into a block formatting context, I have opted to set the overflow property to hidden.
If you want an element to sit on the right of .form-group make sure to add it before the .form-group element in your mark up and float it right. The form-group will then fill the remaining space in the middle of the 2 floated elements.
Lastly when using floats don't forget to clearfix your container