Search input and button not aligning horizontally properly - html

Question

I am trying to align a form text input and button horizontally on the same line while giving the button a minimum width for a responsive layout. For some reason the minimum width forces the button on to a new line
.search-container{
width:100%;
border: 1px solid #000;
display:block;
}
.search-text-container {
width:90%;
display:inline-block;
}
.search-text-container input {
width:100%;
height:30px;
}
.round-icon-container {
width:10%;
display:inline-block;
}
.round-icon-button {
min-width:30px;
display:block;
width:30px;
height:30px;
line-height:normal;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #464646;
box-shadow: 0 0 3px gray;
font-weight:bold;
}
.round-icon-button:hover {
background: #262626;
}
<div class="search-container">
<span class="search-text-container">
<form action="">
<input type="text" name="fname" />
</form>
</span>
<span class="round-icon-container">
<button type="submit" class="round-icon-button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
I have a fiddle here of what I am working on http://jsfiddle.net/dnssmw83/19/ any help would be much appreciated

Answer 1

You could achieve it by using CSS #media queries like this:
JSFiddle - DEMO
* {
box-sizing:border-box;
}
#media(max-width:320px) {
.search-text-container {
width:70% !important;
}
.round-icon-container {
width:30% !important;
}
}
.search-container {
width:100%;
border: 1px solid #000;
display:block;
font-size: 0; /* to remove the space between inline-block elements */
}
.search-container > span {
font-size: 16px; /* add the font-size to child span elements */
vertical-align: middle;
}