HTML: Textbox and Select Dropdown are not level - html

Question

I've been messing with this for a while now and I can simply not get the dropdown to be level with the textboxes! I've been changing the padding, margin, borders, height and all I can think of to make it be level both at the top and at the bottom.
What could be wrong?
.metricDateTextbox {
width: 130px;
padding: 11px;
border: 1px solid white;
color: transparent;
text-shadow: 0 0 0 black;
font-family: Verdana;
font-weight: 500;
background: #fff center right 10px no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAAjUlEQVR42rTTQQ6DIBBG4XcuOZlIMHri2gtMN2OKBAt05E/YsPheDBG+84DDPqfWZRsgwNsYcWqImgDseiHGiAOOzNoB5uzyn0gJF7W5ixyNkSqePnJvZGrFa5GpA/e1T14aInf40vpovyJmvBZ5PYGfCwUsP8H664eR+LlYwFceXhqJDFrsxkVk6PkMALMhvwVPjvl/AAAAAElFTkSuQmCC);
background-size: 12px 8px;
cursor: pointer;
user-select: none;
margin: 0;
}
::-webkit-input-placeholder {
color: grey;
font-weight: 500;
font-family: Verdana;
}
.dwmViewSelect {
width: 80px;
height: 40px;
top: -10px;
font-weight: bold;
border: 1px solid white;
margin: auto;
padding-top: unset 50px;
}
.showDateBtn {
width: auto;
padding: 10px;
text-align: center;
}
<form method="post" action="" name="form">
<div class="reportDateDiv">
<a class="blackColor fSize18">Reporting Period</a>
<input type="text" name="inputDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst" value="#inputDate" autocomplete="off" placeholder="#placeholderStartDate.ToString(" MMM d, yyyy ")" readonly="readonly" />
<a class="blackColor fSize16">to</a>
<input type="text" name="endDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst" value="#endDate" autocomplete="off" placeholder="#noEndDate.ToString(" MMM d, yyyy ")" readonly="readonly" />
<select name="hAxisType" class="dwmViewSelect">
<option selected=#(Request.Form[ "hAxisType"]=="1" ) value="1">Daily</option>
<option selected=#(Request.Form[ "hAxisType"]=="2" ) value="2">Weekly</option>
<option selected=#(Request.Form[ "hAxisType"]=="3" ) value="3">Monthly</option>
</select>
<input type="submit" value="Show" class="showDateBtn" />
</div>
</form>
See this fiddle as well!
https://jsfiddle.net/g6Ledf00/1/

Answer 1

Select element is a inline-block element, setting vertical-aling:top will align the element to the top,
here is some documentation
fiddle
.dwmViewSelect {
width: 80px;
height: 40px;
top: -10px;
font-weight: bold;
border: 1px solid white ;
margin: auto;
padding-top:unset 50px;
vertical-align: top;
}