Button drops after adding a character to its inner text

I have 3 buttons in a row. When I click on a button, it will add a 'O' to the innerText of the button. However, after adding the 'O' the button drop about half way down while other buttons still on the same position. However, when all the buttons have 'O', they all move back to the correct position.

How do I fix this? Thank you

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        window.addEventListener("DOMContentLoaded", () => {
            const gameSpace = document.querySelector('.game-space');
            const buttons = gameSpace.querySelectorAll('button');
            buttons.forEach(button => button.addEventListener('click', () => button.innerText = 'O')); 
        })
    </script>
    <style>
        .game-space button {
            font-size: 2rem;
            min-width: 100px;
            min-height: 100px;
        }
    </style>    
</head>
<body>
    <div class="game-space">
        <div class="first-row">
            <button></button>
            <button></button>
            <button></button>
        </div> 
    </div> 
</body>
</html>

Thank you to @showdev for proposing an answer of using vertical-align. I also notice that we can also fix this by using display flex on the buttons' parent since its align-items is stretch and not baseline as in display block.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        window.addEventListener("DOMContentLoaded", () => {
            const gameSpace = document.querySelector('.game-space');
            const buttons = gameSpace.querySelectorAll('button');
            buttons.forEach(button => button.addEventListener('click', () => button.innerText = 'O')); 
        })
    </script>
    <style>
        .first-row {
            display: flex; 
        }
        .game-space button {
            font-size: 2rem;
            min-width: 100px;
            min-height: 100px;
        }
    </style>    
</head>
<body>
    <div class="game-space">
        <div class="first-row">
            <button></button>
            <button></button>
            <button></button>
        </div> 
    </div> 
</body>
</html>

Button drops after adding a character to its inner text

1 Answers