[SOLVED] How to remove padding caused by font size?

How to remove padding caused by font size?

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

Solution

Add vertical-align: top; to both. By default they are aligned at the baselines of their texts.

#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;
}

#curSelButton,
#curSel {
  vertical-align: top;
}

<table>
  <tr>
    <td>
      <input type="text" id="curSelButton" readonly value="shuffle">
      <input type="text" id="curSel" value="ABC" readonly>
    </td>
  </tr>
</table>