Button drops after adding a character to its inner text [duplicate]

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>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/PVhpB7t06