<!DOCTYPE html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
<p>These pairs of inputs should each have the same height:</p>
<div id=s1>
<input type="text" value="hello">
<input type="date" value="2022-01-01">
</div>
<div id=s2>
<input type="text" value="hello">
<input type="date" value="2022-01-01">
</div>
<div id=s3>
<input type="text" value="hello">
<input type="date" value="2022-01-01">
</div>
<style>
* {
margin:0;
padding:0;
border:0;
font-family: serif;
font-size:0;
}
p {
font-size: 12pt;
}
input {
display:inline-block;
}
div {
margin-top: 10px;
border: 1px solid black;
width: max-content;
height: min-content;
max-height: min-content;
background:red;
}
#s1 input {
font-size:6pt;
}
#s2 input {
font-size:12pt;
}
#s3 input {
font-size:18pt;
}
</style>