searchbar
.content_sidebar {
width: 80%;
margin: auto;
}
.searchbar {
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
-webkit-align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
border: 2px solid #c4c4c4;
border-radius: 30px;
padding: 5px 15px;
width: 100%;
}
.searchbar label {
margin-bottom: 0;
margin-right: 10px;
flex: 1 10 20em;
}
.searchbar label i {
color: #4d4eac;
}
.searchbar input {
border: none;
text-transform: uppercase;
font-size: 13px;
flex: 2 2 20em;
}
.searchbar #search1 {
min-width: 45%;
}
.searchbar .submit-button {
text-align: right;
border-radius: 0 2px 2px 0;
background: #fff;
font-weight: 300;
text-transform: uppercase;
color: #666;
border: none;
font-size: 20px;
flex: 1 1 20em;
}
<div class="container">
<div class="content_sidebar">
<div class="searchbar">
<label for="search1"><i class="fa fa-graduation-cap" aria-hidden="true"></i></label>
<input
type="search"
name="search"
id="search1"
placeholder="Nome da instituição"
class="searchbar-input"/>
<label for="search2"><i class="fa fa-map-marker" aria-hidden="true"></i></label>
<input
type="search"
name="search"
id="search2"
placeholder="Localização"
class="searchbar-input"/>
<button type="submit" class="submit-button"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</div>
</div>