Vertically Align Inputs With Each Other

I have two inputs, but the pre-displayed labels have different length, causing the inputs not to start from the same position (vertically speaking). How to achieve that? Some of my

Solution 1:

You can make use of CSS table layout. The parent element acts as a table row and the child elements as table cells.

.input-container {
  display: table-row;
}
.input-container * {
  display: table-cell;
  margin-left: 5px;
}

<fieldset><legend>Team1</legend><divclass="input-container"><labelfor="player1">Player1</label><inputtype="number"name="player1"></div><divclass="input-container"><labelfor="player2">Player2345</label><inputtype="number"name="player2"></div></fieldset>