In the following code, I have a challenge and I need your help.
There are 2 input fields next to each other. The 2nd one on the right-hand side (green) is positioned a bit higher. It seems that there is padding or margin set at the bottom of the input field. But I can't remove it.
When I set the font size of the 2nd input field same as the 1st input field, the issue does not happen.
But the 2nd input field has to be bigger.
<!doctype html>
<html lang="en">
<head>
<style>
#curSelButton {
width: 60px;
height: 40px;
font-size:15px;
text-align: center;
background-color: white;
border-radius: 2px;
margin:0px;
padding:0px;
}
#curSel {
width: 60px;
height: 40px;
text-align: center;
font-size:25px;
background-color: rgb(0, 255, 0);
font-weight: bold;
margin:0px;
padding:0px;
border-width: thin;
}
</style>
</head>
<body >
<table >
<tr >
<td >
<input type="text" id="curSelButton" readonly value="shuffle" >
<input type="text" id="curSel" value="ABC" readonly >
</td>
</tr>
</body>
</html>How can I position both input fields vertically at the same height, without changing the font site?
Many Thanks, BM