How to make a search bar clippable without pushing down elements, using 2 inputs

Question

I have a problem, I am trying to create a search bar like the one youtube have. So I created a div and placed 2 inputs in there, one text and one button.

This is my code:

<div id="searchBox">
    <form id="searchBar" name="searchBar" action="#" method="get">
        <input class="searchBar"type="text" name="" placeholder="Search for..." required><input class="searchButton" type="submit" value="Search">
    </form>
</div>

And this is the CSS (without some colors and borders) I am using:

#searchBox{
overflow: hidden;
}
#searchBox input.searchBar{
min-width: 24em;
float: left;
overflow: hidden;
}
#searchBox input.searchButton{
float: left;
overflow: hidden;
}

This is how the search bar is looking when the window width is long enough: http://gyazo.com/a7eb0f5b0d3a408c93a7e079a8befbec

And when I make the window smaller then the search bar, the button goes down under the text field, like this: http://gyazo.com/f8c48632945acfc56f8d6036f2421df3

I am trying to create a search bar that responds like the one youtube is using, witch means that they are just clipping it when the window gets to small.

If anyone got a solution for this it would be really appreciated, thank you!

Answer 1

Esiest way to make it sticky is to contain the form with a width set in pixels,

<div id="contain">
<div id="searchBox">
    <form id="searchBar" name="searchBar" action="#" method="get">
 <input class="searchBar"type="text" name="" placeholder="Search for..." required><input class="searchButton" type="submit" value="Search">
    </form>
</div>
 </div>

CSS

#contain {
width: 400px;
}

DEMO

http://jsfiddle.net/XU8MQ/