Make buttons, selects and inputs all the same height - html

Question

I'm trying to make all my form elements the same height. Normally I'd just set a height on each item and job's a good'n! But the dev's I'm working with are adamant I use padding for the buttons incase they need to wrap so the text doesn't get cut off ...by argument would be that's a problem that needs to be solved as well but anyways...
So I have this CodePen showing all my styles. I've included all the CSS just incase anything is being inherited I've missed. I've managed to get most of them the same height by using the same font-size, padding and line-height.
https://codepen.io/moy/pen/pVeOyQ
The problem is one of the buttons doesn't have a border and everything else does, so it's off by a few pixels. I thought border-box would solve this but obviously not!
I could add a border to that button as well and always make sure it's the same colour as the background - but that's a bit of the pain. Is it the only way though?
I know this is a bit of a minor/simple issue but I just want to get some feedback before making a decision.
I've included the CodePen as I couldn't embed all the CSS as it exceeded the limit. Also I couldn't get all the elements horizontally inline on the embed code as there wasn't enough room.

Answer 1

I could add a border to that button as well and always make sure it's the same colour as the background - but that's a bit of the pain. Is it the only way though?
Instead of that, you could add a transparent border, as shown in the snippet below.
input, select, button {
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
padding: 15px;
border: 1px solid #1111;
margin: 0;
}
#transparent-border {
border: 1px solid transparent;
}
#no-border {
border: none;
}
<p>How it looks <i>with</i> the transparent border</p>
<input type="text" name="" placeholder="Input field">
<select class="" name="">
<option value="Select">Select field</option>
</select>
<button type="button" name="button">Button</button>
<button id="transparent-border" type="button" name="button">Button with transparent border</button>
<p>How it looks <i>without</i> the transparent border</p>
<button type="button" name="button">Border</button>
<button type="button" id="no-border" name="button">No border</button>
<p>Comparison</p>
<button type="button" id="no-border" name="button">No border</button>
<button id="transparent-border" type="button" name="button">Button with transparent border</button>

Answer 2

How about setting a min-height for all your elements?
Combined with box-sizing: border-box;