Make expanable search fit in space - html

Question

I am trying to add an expandable search box to a row of items. I'm using the example here as the core of this. Here is my jsfiddle. I tried to simulate the problem by limiting the widths. All of the style statements are just for formatting it here. The main problem is that I want to give the search div just enough room to display a search icon. And then, when it's moused over, it should expand to allow input. As you can see, it expands but in the wrong direction.
The original code had "float: right !important;" instead of the "position:fixed !important; z-index:100;" I changed it to. I did that thinking I could control the placement. And it worked, sort of. But the result isn't what I want.
In short, the code as provided by the source site works correctly but only when the search icon is on a line by itself. Can it be placed on a line with other elements and still expand as needed?
Here's the code I am using:
<style>
.search-form .form-group {
position:fixed !important;
z-insex:100;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
</style>
<div style="width:250px;border:1px solid">
<div style="display:inline-block;width:100px;border:1px solid;"><img src="example.com/test.png" width="100"></div>
<div style="display:inline-block;width:80px;border:1px solid;vertical-align:top;">A block of text</div>
<div class="search" style="display:inline-block;vertical-align:top;">
<div class="searchbox-margin">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="keywords" id="search" placeholder="Search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
</div>
</div>

Answer 1

Try the following code.
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 50%;
border-radius: 4px 25px 25px 4px;
/*transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;*/
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
.search-form .form-group input.form-control {
border: 0 none;
box-shadow: none;
display: block;
height: 27px;
margin-top: 2px;
width: 87%;
padding-right: 20px;
background: transparent;
}
.search-form .form-group {
position: fixed !important;
z-index: 100;
transition: all 0.35s, border-radius 0s;
width: 48px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
margin-top:2px;
}
<div style="width:250px;border:1px solid">
<div style="display:inline-block;width:100px;border:1px solid;"><img src="example.com/test.png" width="100"></div>
<div style="display:inline-block;width:80px;border:1px solid;vertical-align:top;">A block of text</div>
<div class="search" style="display:inline-block;vertical-align:top;">
<div class="searchbox-margin">
<form action="" class="search-form">
<div class="form-group has-feedback">
<input type="text" class="form-control" name="keywords" id="search" placeholder="Search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
</div>
</div>