Aligning a toolbar with search text box using font awesome - html

Question

I am trying a make a toolbar using font awesome with a few icons and search text box at the start.
I would like this to be ideally aligned in a way that it has search on the left most followed by the icons to its right.
.icon-bar {
width: 40%;
text-align: center;
background-color: #555;
overflow: auto;
display:flex;
}
.icon-bar a {
width: 15%;
padding: 12px 0;
float: left;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<div class="icon-bar">
<input id="searchInput" type="text" placeholder="Search" /><i id="filtersubmit" class="fa fa-search"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
<i class="fa fa-trash"></i>
<a class="active" href="#"><i class="fa fa-home"></i></a>
</div>
</div>
Ideally I would like to be aligned like this image below:
Changes as per the solution below:
Menu with full browser screen:
Now when I minimize the browser the scroll comes which is because of overflow:auto.
Is their a way I can control the width of the search box for the icons I think changing the fontsize does the trick.

Answer 1

Add display flex to the .icon-bar div.
.icon-bar {
width: 30%;
text-align: center;
background-color: #555;
overflow: auto;
display:flex;
}
Also, as dipas noted remove that position left.

Answer 2

It is easier using inline-blocks:
.icon-bar {
text-align: center;
background-color: #555;
overflow: auto;
}
.icon-bar a {
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
#filtersubmit {
color: #7B7B7B;
cursor: pointer;
}
.icon-bar > * {
display: inline-block;
vertical-align: middle;
padding: 10px;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div>
<div class="icon-bar">
<input id="searchInput" type="text" placeholder="Search" /><i id="filtersubmit" class="fa fa-search"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
<i class="fa fa-trash"></i>
<a class="active" href="#"><i class="fa fa-home"></i></a>
</div>
</div>
You can use flexboxes too:
.icon-bar {
text-align: center;
background-color: #555;
overflow: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
width: 60%;
}
.icon-bar a {
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
#filtersubmit {
color: #7B7B7B;
cursor: pointer;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div>
<div class="icon-bar">
<input id="searchInput" type="text" placeholder="Search" /><i id="filtersubmit" class="fa fa-search"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
<i class="fa fa-trash"></i>
<a class="active" href="#"><i class="fa fa-home"></i></a>
</div>
</div>

Answer 3

Use display: table on parent .icon-bar and display: table-cell on children groups .search-bar and .button-wrapper
.icon-bar {
display: table;
padding: 0 20px;
background-color: #555;
overflow: auto;
}
.search-bar, .button-wrapper {
display: table-cell;
vertical-align: middle;
}
#filtersubmit {
color: #7B7B7B;
cursor: pointer;
}
.button-wrapper a {
display: inline-block;
padding: 12px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.button-wrapper a:hover {
background-color: #000;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<div class="icon-bar">
<div class="search-bar">
<input id="searchInput" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
</div>
<div class="button-wrapper">
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
<i class="fa fa-trash"></i>
<a class="active" href="#"><i class="fa fa-home"></i></a>
</div>
</div>
</div>