Làm thế nào để căn được button tìm kiếm nằm ngang và sát với text box?

Hello.
Mình tạo 1 form tìm kiếm như sau:

html

<form action="#" method="get" class="search">
					<input type="text" class="text-search" placeholder="Search"/>
					<button type="submit" class="submit-btn-search"><i class="fa fa-search"></i></button>
</form>

css

body {
  background-color: tomato;
}

.search {
	padding: 5px 0px 5px 0px;
	text-align: center;
}

.text-search {
	background: #f3f4f5;
	width: 170px;
	height: 23px;
  padding: 5px;
	font-size: 14px;
	border-radius: 3px 0 0 3px;
	border: none;
}

.submit-btn-search {
	background: #f3f4f5;
	padding: 8px 10px 8px 10px;
	border: none;
	border-radius: 0 3px 3px 0;
	vertical-align: middle;
	font-size: 15px;
}

.submit-btn-search:focus, .text-search:focus { 
  outline: none;
}

xem ví dụ trực quan tại: https://codepen.io/anon/pen/JMeRMv?editors=1100
Nhưng các button tìm kiếm nó lại nằm lệch so với text box và không sát vào được. Mình đã sử dụng thuộc tính vertical: middle; nhưng nó vẫn bị lệch. Và không thể nằm sát với text box, mình có sử dụng mẹo thêm cặp kí hiệu ghi chút vào đâu và cuối 2 thành phần text box và button để nối liền nó như sau

 <input type="text" class="text-search" placeholder="Search"/><!--
 --><button type="submit" class="submit-btn-search"><i class="fa fa-search"></i></button>

nhưng khi zoom trang hoặc thu nhỏ trình duyệt thì nó lại bị như cũ, Mình tìm hiều thì biết là 2 thành phần kia k sát nhau được do đó là 2 thành phần riêng biệt, phải bỏ qua dấu enter hoặc space bằng cách thêm cặp ghi chú vào thì nó sẽ sát
How to fixed it?
Thank you.