Inconsistent heights with date and select - html

Question

I have come across this issue and not sure of resolution. These 2 inputs should be coming in exactly the same height, however they are not. After looking at similar questions exhaustively, I've confirmed this is not due to box-sizing. Any thoughts or help would be greatly appreciated.
This is the issue in question:
.updateInput select {
width: calc(24.5% - 4px);
min-height: 1.5em;
}
select {
width: 100%;
border: 1px solid #ccc;
border-radius: 10px;
background-color: white;
margin-top: 10px;
margin-bottom: 10px;
padding: 0.5em;
font-size: 16px;
font-family: Courier, Arial, Helvetica, sans-serif;
cursor: pointer;
line-height: 14px;
min-height: 1.5em;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.updateInput input[type=date] {
width: calc(24.5% - 4px);
}
input[type=number],
input[type=date] {
width: 100%;
border: 1px solid #ccc;
border-radius: 10px;
background-color: white;
margin-top: 10px;
margin-bottom: 10px;
font-size: 16px;
font-family: Courier, Arial, Helvetica, sans-serif;
cursor: pointer;
line-height: 14px;
}
input {
font: inherit;
vertical-align: middle;
padding: 0.5rem;
margin: 0;
display: inline-block;
min-height: 1.5em;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
<div id="saleUpdateInput" class="updateInput">
<form id="updateInputData">
<select>
<option selected>Select product</option>
</select>
<select>
<option selected>Select sale %</option>
</select>
<input type="date">
<input type=submit value="Update">
</form>
</div>
Minimal example as requested in comments:
https://jsfiddle.net/8qexLpa3/

Answer 1

You will notice by default display:inline-block aligns selects to the top of the container and inputs to the bottom.
<div id="saleUpdateInput" class="updateInput">
<form id="updateInputData">
<select>
<option selected>Select product</option>
</select>
<select>
<option selected>Select sale %</option>
</select>
<input type="date">
<input type=submit value="Update">
</form>
</div>
I would recommend you use flex box to take control over this behavior.
#updateInputData {
display: flex;
}
<div id="saleUpdateInput" class="updateInput">
<form id="updateInputData">
<select>
<option selected>Select product</option>
</select>
<select>
<option selected>Select sale %</option>
</select>
<input type="date">
<input type=submit value="Update">
</form>
</div>