HTML form submit button is not vertically centered - html

Question

This is my first time posting, so I hope I'm doing this right.
I want to style a search bar like this one
The problem is, the submit button is always a little off vertically in comparison to the text-input. No matter what I do, there is always at least 1px offset. Help is MUCH appreciated!
I have the following code:
.searchfield{
-webkit-appearance:none;
border: 3px solid #1a5087;
border-right: 0px;
border-radius: 3px;
height: 30px;
font-size: 20px;
margin: 0px;
margin-top: 0px;
outline: 0;
display: inline;
}
.searchbutton{
-webkit-appearance:none;
background-color: #ffb800;
height: 36px;
border: 3px solid #ffb800;
width: 40px;
color: white;
margin-left: -25px;
cursor: pointer;
outline: 0;
background-repeat:no-repeat;
background-position: 2px 2px;
margin-top: 5px;
display: inline;
}
<form action="action.php" method="post">
<input type="number" name="name" placeholder="placeholder" required class="searchfield">
<input type="submit" value="search" class="searchbutton">
</form>

Answer 1

I have tried to rebuilt the same in fiddle. Have a look here
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>

Answer 2

A couple of CSS changes should fix the alignment:
Add vertical-align: middle; to both .searchfield and .searchbutton to align them to the middle of each other
Add padding: 0; to .searchfield to remove any padding that the browser may apply to it by default
Remove margin-top: 5px; from .searchbutton to stop it from being pushed down
.searchfield{
-webkit-appearance:none;
border: 3px solid #1a5087;
border-right: 0px;
border-radius: 3px;
height: 30px;
font-size: 20px;
margin: 0px;
margin-top: 0px;
outline: 0;
display: inline;
padding: 0;
vertical-align: middle;
}
.searchbutton{
-webkit-appearance:none;
background-color: #ffb800;
height: 36px;
border: 3px solid #ffb800;
width: 40px;
color: white;
margin-left: -25px;
cursor: pointer;
outline: 0;
background-repeat:no-repeat;
background-position: 2px 2px;
/*margin-top: 5px;*/
display: inline;
vertical-align: middle;
}
<form action="action.php" method="post">
<input type="number" name="name" placeholder="placeholder" required class="searchfield">
<input type="submit" value="search" class="searchbutton">
</form>