c3434

I ended up finding the fix to the bug. I made content a grid and added five template rows to it. This way when it hides all the contentInside divs, it will shrink the row to a height of 0. I also removed a few unnecessary lines of code such as the align-self: normal; which had no effect on the code. This ended up fixing the problem. Thank you all for your help.
This is the fixed code:

<pre class="wp-block-code"><code>
  
    <style>
      .testDivLeft {
        border: 1px solid black;
        text-align: center;
      }
      .testDivRight {
        border: 1px solid black;
        text-align: center;
      }
    
      .menu {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      }
      .menu button {
        border: 1px solid black;
        padding: 14px 16px;
        cursor: pointer;
        line-height: 0px;
      }
      .active {
        background-color: #95d3f0;
      }
      .organize1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        vertical-align: top;
      }
      .content {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
      }
      .tab button:hover {
        background-color: #a3a3a3;
      }
    
    </style>
    <div class="Container">
    
      <div class="menu">
        <button onclick="switchTab(event, 'Case')" class="tabButton" id="defaultOpen">
          <p>Case</p>
        </button>
        <button onclick="switchTab(event, 'Extensions')" class="tabButton">
          <p>Extensions</p>
        </button>
        <button onclick="switchTab(event, 'Arguments')" class="tabButton">
          <p>Arguments</p>
        </button>
        <button onclick="switchTab(event, 'Flow Notes')" class="tabButton">
          <p>Flow Notes</p>
        </button>
        <button onclick="switchTab(event, 'Opponent\'s Arguments')" class="tabButton">
          <p>Opponent's Arguments</p>
        </button>
      </div>
    
      <div class="content">
    
        <div id="Case" class="contentInside">
          <div class="organize1">
            <div class="testDivLeft">
              <h2>Google doc</h2>
            </div>
  
            <div class="testDivRight">
              <h2>input sections of websites</h2>
            </div>
          </div>
        </div>
    
        <div id="Extensions" class="contentInside">
          <div class="organize1">
            <div class="testDivLeft">
              <h2>input sections of websites and comments</h2>
            </div>
    
            <div class="testDivRight">
              <h2>Organization</h2>
            </div>
          </div>
        </div>
    
        <div id="Arguments" class="contentInside">
          <div class="organize1">
            <div class="testDivLeft">
              <h2>Left google doc</h2>
            </div>
      
            <div class="testDivRight">
              <h2>Right google doc</h2>
            </div>
          </div>
        </div>
    
        <div id="Flow Notes" class="contentInside">
          <div class="organize1">
            <div class="testDivLeft">
              <h2>Left side of T-chart</h2>
            </div>
      
            <div class="testDivRight">
              <h2>Right side of T-chart</h2>
            </div>
          </div>
        </div>
    
        <div id="Opponent's Arguments" class="contentInside">
          <div class="organize1">
            <div class="testDivLeft">
              <h2>Left google doc</h2>
            </div>
      
            <div class="testDivRight">
              <h2>Right google doc</h2>
            </div>
          </div>
        </div>
    
      </div>
    
    </div>
  
    <script type="text/javascript">
      document.getElementById("defaultOpen").click();
      //   all things related to this button script was modified from https://www.w3schools.com/howto/howto_js_tabs.asp
    
      function switchTab(evt, tabName) {
    
        var i, contentInside, tabButton
    
        contentInside = document.getElementsByClassName("contentInside");
        for (i = 0; i < contentInside.length; i++) {
          contentInside[i].style.display = "none";
        }
    
        tabButton = document.getElementsByClassName("tabButton");
        for (i = 0; i < tabButton.length; i++) {
          tabButton[i].className = tabButton[i].className.replace(" active", "");
        }
    
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    
      }
    
    </script>
    
  </code></pre>

I’m so sorry, It seems that I forgot to publish the page, so nobody would be able to access it but me. I think I have fixed it and that link should be valid now. Thank you for letting me know.