trying to make a wordle game, but the letters are going up to down, instead of right to left, i don't know how to tackle it

Question

I am making a 4x4 wordle game, and I used js to make the squares and input letters. When I input letters they go top to bottom instead of left to right and I'm not really sure how to fix it. I don't know how to modify the key events to go from the first column to the second, this is the code that deals with it, but I don't know why it isn't working, i feel like the code that is affecting it is this, but im not sure

    if (col < gameWidth) {
        let currsquare = document.getElementById(row.toString() + '-' + col.toString());
        currsquare.innerText = e.code[3];
        col++;
    }

   var gameHeight = 4; //number of guesses
    var gameWidth = 4; //length of the word

    var row = 0; //current guess (attempt #)
    var col = 0; //current letter for that attempt

    var gameOver = false;

    var word = "RAAA";

    window.onload = function() {
        initialize();
    };

    function initialize() {
        const darkModeToggle = document.getElementById("dark-mode-toggle");
        darkModeToggle.addEventListener("click", () => {
            document.body.classList.toggle("dark");
        });

        const instructionsToggle = document.getElementById("info");
        const instructionsContainer = document.getElementById("instructions-container");

        // Hide the instructions by default
        instructionsContainer.style.display = "none";

        // Show or hide the instructions when the button is clicked
        instructionsToggle.addEventListener("click", () => {
            if (instructionsContainer.style.display === "none") {
                instructionsContainer.style.display = "block";
            } else {
                instructionsContainer.style.display = "none";
            }
        });

        // Create the game board
        for (let i = 0; i < gameHeight; i++) {
            let row = document.createElement("div");
            row.classList.add("row");
            for (let j = 0; j < gameWidth; j++) {
                let square = document.createElement("span");
                square.id = i.toString() + "-" + j.toString();
                square.classList.add("square");
                square.innerText = "";
                row.appendChild(square);
            }
            document.getElementById("board").appendChild(row);
        }

        // Listen for Key Press
        document.addEventListener("keyup", (e) => {
            if (gameOver) return;

            if ("KeyA" <= e.code && e.code <= "KeyZ") {
                if (col < gameWidth) {
                    let currsquare = document.getElementById(row.toString() + '-' + col.toString());
                    currsquare.innerText = e.code[3];
                    col++;
                }
            } else if (e.code == "Backspace") {
                if (col > 0) {
                    col--;
                    let currsquare = document.getElementById(row.toString() + '-' + col.toString());
                    currsquare.innerText = "";
                }
            } else if (e.code == "Enter") {
                update();
                row += 1; // start new row
                col = 0; // reset current index to 0 for new row
            }

            if (!gameOver && row == gameHeight) {
                gameOver = true;
                document.getElementById("answer").innerText = word;
            }
        });
    }

        function update() {
            let correct = 0;
            for (let column = 0; column < gameWidth; column++) {
                let currsquare = document.getElementById(row.toString() + '-' + column.toString());
                let letter = currsquare.innerText;
        
                // Is it in the correct position?
                if (word[row*gameWidth + (column % gameWidth)] == letter) {
                    currsquare.classList.add("correct");
                    correct += 1;
                } // Is it in the word?
                else if (word.includes(letter)) {
                    currsquare.classList.add("present");
                } // Not in the word
                else {
                    currsquare.classList.add("absent");
                }
            }
            
            if (correct == gameWidth) {
                gameOver = true;
                document.getElementById("congrats").style.display = "block";
        
            }
            
            if (!gameOver && row == gameHeight - 1) {
                gameOver = true;
                document.getElementById("answer").innerText = word;
            }
        }
        

this is the updated html

<html>
    <head>
        <title>Wordle</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale = 1.0">
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

        <link rel="stylesheet" href="wordle.css">
    </head>

    <body>
        <h1 id="title">Wordle</h1>
        <i  id = "info" class="fas fa-info-circle"></i>     
           <i id="dark-mode-toggle" class="fas fa-circle"></i>

    

        <hr>
        <br>
        <div id="board">
        </div>
        <br>
        <div id="instructions-container">
            <p>The goal is to guess the word </p>
          </div>
          
        <img id="congrats" src="https://res.cloudinary.com/mkf/image/upload/v1675467141/ENSF-381/labs/congrats_fkscna.gif" alt="Congratulations">

       

            <script src="wordle.js"></script>

</html>

This is the updated css

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  --correct:#6baa64;
  --background-color:white;
  --text-color:black;
  color: var(--text-color);
  background-color: var(--background-color);
}

body.dark{
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  --correct:#6baa64;
  --background-color:black;
  background-color: var(--background-color);
  --text-color:white;
  color:white;

}

hr {
  width: 500px;
}

#title {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 2px;
}

#board {
  width: 350px;
  height: 420px;
  margin: 0 auto;
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
}

.square {
  border: 2px solid lightgray;
  width: 60px;
  height: 60px;
  margin: 2.5px;

  color: black;
  font-size: 36px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.correct {
  background-color: var(--correct);
  color: white;
  border-color: white;
}

.present {
  background-color: #C9B458;
  color: white;
  border-color: white;
}

.absent {
  background-color: #787C7E;
  color: white;
  border-color:white;
}


#congrats {
  display: none;
}


#dark-mode-toggle {
  position: fixed;
  top: 10px;
  right: 250px;
}

#question{
  position: fixed;
  top: 10px;
  right: 200px;


}

#info{

  position: fixed;
  top: 10px;
  right: 300px;
}

Answer 1

You dont need display: flex; in board but you need to add display: flex; to row

#board {
  width: 350px;
  height: 420px;
  margin: 0 auto;
  margin-top: 3px;
}
.row {
  display: flex;
}