Expand search div to the button
<p>I've HTML structure like following</p>

<pre><code>&lt;div class="box-search-select"&gt;

  &lt;div class="search-left"&gt;
    &lt;input id="search" type="text"&gt;
  &lt;/div&gt;

  &lt;button type="submit" class="button"&gt;Search&lt;/button&gt;

  &lt;div style="clear:both"&gt;&lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>and CSS as following </p>

<pre><code>.box-search-select{
  width:100%;
  padding:20px 0;
}
.search-left{
  float:left;
  width: 90%;
}
.search-left input{
  width:100%;
}
button{
  float:right;
}
</code></pre>

<p>Output : (Normal screen size)
<a href="https://i.stack.imgur.com/UyDYB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UyDYB.png" alt="enter image description here"></a></p>

<p>I want to expand "search-left" div width to the Search button.</p>

<p>Which should work properly for fluid responsive layouts too. </p>

<p>Here I've created fiddle if you wish to play : <a href="https://jsfiddle.net/j7g8143a/1" rel="nofollow noreferrer">https://jsfiddle.net/j7g8143a/1</a></p>

<p>Now if I decrease the width of screen then the search button move to next line like following picture</p>

<p><a href="https://i.stack.imgur.com/t5ZmE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t5ZmE.png" alt="enter image description here"></a></p>

<p>but I want the "search-left" div to automatically adjust it's width according to screen size like following picture.</p>

<p><a href="https://i.stack.imgur.com/AvF8Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AvF8Y.png" alt="enter image description here"></a> </p>

<p>I need only CSS solution without using any media queries</p>

<p><strong>EDIT:</strong> It should have to be compatible with IE9.</p>