Why are my divs moving when I enter X or O in this TicTacToe game

Question

I'm working on a tictactoe game which is basically done, but the UI designs seems to be wrong. When I click on a square (div tag) the square moves down. How could I prevent this? What do I need to add to my html / css code to make it stable? thanks. And here's a link to my codepen, if anything is interested to look at the rest of the code: html,css,js https://codepen.io/zentech/pen/xLRzGr html

<div class="container">
  <!-- header -->
  <div class="header">
    <h1>TicTacToe</h1>
    <h2>You're playing against the computer!</h2>    
  </div>  
  <div class="ticTacToe">      
    <!-- first row (3 square) -->
    <div class="row">
      <div id="0" class="square"></div>
      <div id="1" class="square"></div>
      <div id="2" class="square"></div>      
    </div>

    <!-- second row (3 square) -->
    <div class="row">
      <div id="3" class="square"></div>
      <div id="4" class="square"></div>
      <div id="5" class="square"></div>      
    </div> 

    <!-- third row (3 square) -->
    <div class="row">
      <div id="6" class="square"></div>
      <div id="7" class="square"></div>
      <div id="8" class="square"></div>      
    </div>     
  </div> 
  <div class="controls">
    <h2 id="message">Message:</h2>
    <a href="#" class="resetGame"><h3>Reset Game</h3</a>
  </div>
</div>

css

body {
  background-color: #999;
  font-family: serif, verdana;
}

h1 {
  font-size: 50px;
}

h2 {
  margin-bottom: 30px;
}

.container {
  margin: 0 auto;
  text-align: center;
}

.row > div {
  margin: 2px;
  border: solid 1px black;
  display: inline-block;
  font-size: 35px;
  width: 50px;
  height: 50px;
  text-align: center; 
  padding: 0px;
}

#message {
  /* display: inline-block; */
  text-align: center; 
}

Answer 1

Add vertical-align: top to your .row > div rule in CSS to fix the alignment.

I also added line-height: 50px to vertically center the "X" and "O" letters within each 50px box.

//variables
var xPlayer = "X";
var oPlayer = "O";
var turn = "X";
var board = new Array(9);
var message = document.getElementById("message");

$(document).ready(function() {

  //1- listener for event clicks
  $(".square").click(function() {
    var sqrId = $(this).attr("id");
    playerMove(sqrId);
    if (checkWinners()) {
      message.innerHTML = "Message: " + turn + " Wins!";
      return;
    }
    nextPlay();
  });


  //reset game anchor listener
  $(".resetGame").click(function() {
    $(".square").text("");
    $("#message").text("Message: ");
  })

});

function playerMove(sqrId) {
  console.log("player move: " + $('#' + sqrId).attr("id") + " " + turn);
  if ($('#' + sqrId).text() == "") {
    $('#' + sqrId).text(turn);
    message.innerHTML = "Message: ";
  } else {
    console.log("error!");
    message.innerHTML = "Message: Wrong move!..."
    return;
  }
  // console.log($(this).attr("id"));
  turn = (turn == 'X') ? 'O' : 'X';
}

//checking for winning combinations
function checkWinners() {
  console.log("check winners");
  //checking rows
  if (board[0] != "" && board[0] == board[1] && board[1] == board[2]) {
    return true;
  } else if (board[3] != "" && board[3] == board[4] && board[4] == board[5]) return true;
  else if (board[6] != "" && board[6] == board[7] && board[7] == board[8]) return true;
  //checking across
  else if (board[0] != "" && board[0] == board[4] && board[4] == board[8]) return true;
  else if (board[2] != "" && board[2] == board[4] && board[4] == board[6]) return true;
  else {
    return false;
  }
}

/* checking if there's more room to play, if not 
   then it's a draw'*/
function nextPlay() {
  for (var i = 0; i < board.length; i++) {
    if (board[i] == '') {
      message.innerTHML = "Message: " + turn + " move";
      return true;
    }
  }
  message.innerHTML = "Message: It's a draw!";
  return false;
}

body {
  background-color: #999;
  font-family: serif, verdana;
}

h1 {
  font-size: 50px;
}

h2 {
  margin-bottom: 30px;
}

.container {
  margin: 0 auto;
  text-align: center;
}

.row>div {
  margin: 2px;
  border: solid 1px black;
  display: inline-block;
  font-size: 35px;
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 0px;
  /* add this: */
  vertical-align: top;
  line-height: 50px;
}

#message {
  /* display: inline-block; */
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <!-- header -->
  <div class="header">
    <h1>TicTacToe</h1>
    <h2>You're playing against the computer!</h2>
  </div>
  <div class="ticTacToe">
    <!-- first row (3 square) -->
    <div class="row">
      <div id="0" class="square"></div>
      <div id="1" class="square"></div>
      <div id="2" class="square"></div>
    </div>

    <!-- second row (3 square) -->
    <div class="row">
      <div id="3" class="square"></div>
      <div id="4" class="square"></div>
      <div id="5" class="square"></div>
    </div>

    <!-- third row (3 square) -->
    <div class="row">
      <div id="6" class="square"></div>
      <div id="7" class="square"></div>
      <div id="8" class="square"></div>
    </div>
  </div>
  <div class="controls">
    <h2 id="message">Message:</h2>
    <a href="#" class="resetGame">
      <h3>Reset Game</h3</a>
  </div>
</div>