Кнопка «Отправить» не будет правильно выстроена

Question

Моя кнопка отправки чуть выше панели поиска.Может кто-нибудь, пожалуйста, помогите мне разобраться.Я пытался выделить верхнюю часть кнопки, но ничего не вышло.Спасибо за любую помощь.

.searchTerm {
border: 1px solid rgba(214, 214, 214, 0.6);
border-right: none;	
border-radius: 15px 0 0 15px;	
color: #c2c2c2;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
height: 34px;	
outline: none;	
padding: 5px;
text-indent: 12px;
width: 580px; 
}

.searchTerm:focus {
color: #222;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
}

.searchButton {
background-color: #ffffff;
border: 1px solid rgba(214, 214, 214, 0.6);
border-left: 0;	
border-radius: 0 15px 15px 0;	
color: #adadad;
cursor: pointer;	
font-size: 25px;
height: 46px;
margin-left:-5px;
text-align: center; 
width: 60px;   
}

.searchButton:focus {
outline: none;
}

<form method="get" action="http://www.google.com/search">
<input type="text" name="q" class="searchTerm" placeholder="Search The Web">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</form>

Answer 1

Я немного поиграл с вашим кодом, и здесь работает скрипка: https://jsfiddle.net/6e5q1v09/

.searchTerm {
   display:inline-flex;
   border: 1px solid rgba(214, 214, 214, 0.6);
   border-right: none;  
   border-radius: 15px 0 0 15px;    
   color: #c2c2c2;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 17px;
   height: 32px;    
   outline: none;   
   padding-bottom:11px;
   text-indent: 12px;
   width: 580px; 
}

.searchTerm:focus {
   color: #222;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 17px;
}

.searchButton {
  display:inline-flex;
  background-color: #ffffff;
  border: 1px solid rgba(214, 214, 214, 0.6);
  border-left: 0;   
  border-radius: 0 15px 15px 0; 
  color: #adadad;
  cursor: pointer;  
  font-size: 25px;
  height: 46px;
  margin-left:-5px;
  text-align: center; 
  width: 60px;   

}

.searchButton:focus {
  outline: none;
}

Редактировать: я вижу, что теперь заполнитель не выровнен должным образом, вы можете просто поиграть со свойствами padding и heightпока вы понимаете это правильно.Вот исправленная новая скрипка: https://jsfiddle.net/6e5q1v09/