Select will not align properly

Question

I have a form with a select between two text boxes and the select is not perfectly aligned to the top of the other text boxes. See screenshot.

It was aligned fine with border radius 0 but when I try to style it like the rest of my inputs the alignment gets off. The rest of the inputs have a border radius of 3. I noticed that the alignment of the select gets worse as I increase the border radius from 1 - 3.

Here's my CSS for the inputs and select:

input {
  display: inline-grid;
  height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 3px;
 }

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhE=truncatedonpurpose);
    padding: .5em;
    padding-right: 1.5em;
  border-radius: 3px;
  min-width: 110px;
  height: 46px;
  margin-right: 5px;
 }

<div class="form-group form-group-depth-1 form-group-city"><input type="text" id="tfid-57-5" name="city" placeholder="City" class="form-control" value="Jackson"></div>
<div class="form-group form-group-depth-1 form-group-state"><select id="tfid-57-6" name="state" class="form-control"><option value="">-</option><option value="AK">AK</option><option value="AL">AL</option><option value="AR">AR</option><option value="AS">AS</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option></select></div>
<div class="form-group form-group-depth-1 form-group-zipCode"><input type="text" id="tfid-57-7" name="zipCode" placeholder="Zip code" class="form-control" value="73555"></div>