ligiaff
4/27/2017 - 5:51 PM

searchbar

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>