Having problems with responsive widths - html

Question

I tried to make a search block that need to be looking like this:
Now i want when someone will resize the window, the search button will still be in the same line, so i did:
CSS:
.search {
background-color: #23507c;
border: none;
outline: none;
font-size: 18px;
width: 92%
}
#searchButton {
width: 8%;
color: #555555;
font-size: 16px;
}
HTML:
<div id="search">
<form action="search.php" method="POST">
<span class="glyphicon glyphicon-search" style="font-size: 20px;"></span>
<span style="width: 100%;padding:0;margin:0;">
<input type="text" class="search" name="search" placeholder="search for diamonds" />
<button type="submit" id="searchButton"><span class="glyphicon glyphicon-search"></span>
Search</button>
</form>
</span>
</div>
https://jsfiddle.net/kL1m9a8x/15/
What i try to do, is to insert the input and the button to a span that take the width of the blue block execept the glypicon, and than give to the input 80% from the parent element and the button have 20%, but its not working. The line break and the button found in the next line... even when the window is big...

Answer 1

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#search{
position: relative;
margin: 5%;
}
.search-inner{
display: table;
width: 100%;
background-color: #23507c;
border: none;
outline: none;
font-size: 18px;
}
.search-item{
display: table-cell;
vertical-align: middle;
}
.search-item-1{
width: 82%;
color: #fff;
}
.search-item-1 .glyphicon{
position: absolute; top: 50%; left: 10px;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.search-item-2{
text-align: right;
}
input,
button{
border: none;
outline: none;
font-size: 18px;
padding: 10px;
display: inline-block;
}
input{
background-color: #23507c;
color: #fff;
padding-left: 35px;
width: 100%;
}
button{
width: 110px;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div id="search">
<form action="search.php" method="POST">
<div class="search-inner">
<div class="search-item search-item-1">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="search" name="search" placeholder="search for diamonds" required />
</div>
<div class="search-item search-item-2">
<button type="submit" id="searchButton"><span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</div>
</form>
</div>

Answer 2

Here is how i would do it:
Basically making the input transparent, giving color to the form element and positioning the button absolutely over it. Note the position:relative on the form element, as position:absolute is always relative to the closest explicitly relative positioned parent.
*, *:before, *:after {
padding:0;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
form {
background-color: #23507c;
display: block;
padding: 10px 15px;
width: 100%;
color: #fff;
font-size: 16px;
line-height: 24px;
position: relative;
}
form input {
background: transparent;
border: none;
outline: none;
color: #fff;
font-size: 16px;
line-height: 24px;
padding-left: 10px;
}
form button {
display: block;
position: absolute;
top: 10px;
right: 10px;
border: none;
outline: none;
height: 24px;
}
<!-- FontAwesome for icons -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- relevant code -->
<form action="search.php" method="POST">
<i class="fa fa-search"></i>
<input type="text" class="search" name="search" placeholder="search for diamonds" />
<button type="submit" id="searchButton"><i class="fa fa-search"></i> Search
</button>
</form>