title: Needing help forcing the div to be stuck right under this other div in CSS
body: <p>So this is day 2 of making an HTML game. I am honestly convinced I'm making a lot of progress and I am, except, <a href="https://stackoverflow.com/questions/71835496/is-there-a-way-to-do-this-in-css">yet again,</a> I run into another styling problem.</p>
  <p>So there is a grid in the game that updates every time the game is loaded. Basically, the grid's length and width to the word with the most letters, as shown below:</p>
  <p><a href="https://i.stack.imgur.com/QvEXy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QvEXy.png" alt="enter image description here" /></a></p>
  <p>As you can see, the word everyday is 8 letters long, so the game puts 8 spaces available.</p>
  <p>Now here's two problems with this in general:</p>
  <ul>
  <li>I want the word bank to be directly UNDER the grid, no matter the length of the grids.</li>
  <li>I want the grids to have NO space under them, so you see the little space between every new row? Basically that needs to go poof, and not be there.</li>
  </ul>
  <p><strong>What have you tried so far?</strong></p>
  <p>Placing the word bank div under the game area div didn't work, so I started to look up some solutions on Google, and it told me to try to add position: absolute; and position: relative; to div 1 and 2, but that just created a mess when it came to the word bank (spacing it out WAY too much) and did nothing to the grids. Also, display: block; can't help, because the code is already using flex for a different reason.</p>
  <p>I also tried using margin-bottom for the grid space problem, but did nothing.</p>
  <p>Code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// definitely didn't get the grid part from Stack Overflow
  var score = 0;
  var scoreDisplay = document.getElementById("score");
  scoreDisplay.innerHTML = "&lt;p&gt;Score: " + score;
  var wordBank = document.getElementById("wordBank")
  var gameArea = document.getElementById("gameArea")
  let rows = document.getElementsByClassName("gridRow");
  let cells = document.getElementsByClassName("cell");
  // sparing you word array, nobody wants to read that list to the very last bits
  var selectedWords = []
  for (let i = 0; i &lt; 5; i++) {
    const selectedWord = words[Math.floor(Math.random() * words.length)]
    if (selectedWord.length &lt;= 9) {
      wordBank.innerHTML += "&lt;span&gt;" + selectedWord + "&lt;/span&gt;"
      selectedWords.push(selectedWord)
    }
  }
  var longestWord = selectedWords.reduce((a, b) =&gt; a.length &lt; b.length ? b : a, "")
  var charCount = longestWord.length
  
  function makeRows(rowNum) {
    for (r = 0; r &lt; rowNum; r++) {
      let row = document.createElement("div");
      gameArea.appendChild(row).className = "gridRow";
    };
  };
  
  function makeColumns(cellNum) {
    for (i = 0; i &lt; rows.length; i++) {
      for (j = 0; j &lt; cellNum; j++) {
        let newCell = document.createElement("div");
        rows[j].appendChild(newCell).className = "cell";
      };
  
    };
  };
  
  function defaultGrid() {
    makeRows(charCount);
    makeColumns(charCount);
  }
  defaultGrid();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0px;
  }
  
  .content {
    width: 512px;
    height: 512px;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial;
  }
  
  .score {
    font-size: 24px;
    text-align: right;
  }
  
  .wordBank {
    border: 2.5px solid black;
    border-radius: 5px;
    font-size: 24px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 13%;
  }
  
  .wordBank&gt; :nth-of-type(even) {
    align-self: flex-end;
  }
  
  .gameArea {
    width: 100%;
    height: 70%;
  }
  
  .cell {
    border: 1px solid black;
    width: 50px;
    height: 50px;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content" id="content"&gt;
    &lt;div class="gameArea" id="gameArea"&gt;
    &lt;/div&gt;
    &lt;div class="wordBank" id="wordBank"&gt;
    &lt;/div&gt;
    &lt;div class="score" id="score"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I fix this issue? Any help is appreciated!</p>
  <p>(Example for David):
  <a href="https://i.stack.imgur.com/0FmT1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0FmT1.png" alt="enter image description here" /></a></p>