JSFiddle - React, Tailwind, and code Playground

HTML

<main class="maingrid">
  <div class="a1">BLAH</div>
  <div class="a2">BLAH</div>
  <div class="a3">BLAH</div>
  <div class="a4">BLAH</div>
  <div class="a5">BLAH</div>
  <div class="a6">
    at<br />at<br />
  </div>
  <div class="a7">BLAH</div>
  <div class="a8">
    <button type="button" onclick="BreakTheGrid();">click me :(</button>
  </div>
</main>

CSS

html,
        body {
          height: 100vh;
          padding: 0;
          margin: 0;
        }

        .maingrid {
          height: 100%;
          padding-left: 15px;
          padding-right: 15px;
          background-color: red;
          display: grid;
          grid-template-rows: min-content min-content min-content min-content min-content min-content min-content auto;
          grid-template-areas: 'a1' 'a2' 'a3' 'a4' 'a5' 'a6' 'a7' 'a8';
          grid-row-gap: .2em;
        }

        @media only screen and (min-width:768px) {
          .maingrid {
            grid-template-columns: 9fr 3fr;
            grid-template-rows: min-content min-content min-content min-content auto;
            grid-template-areas: 'a1 a2' 'a3 a4' 'a5 a6' 'a7 a6' 'a8 a6';
            background-color: darkcyan;
          }
        }

        .maingrid div {
          background-color: black;
        }

        .a1 {
          grid-area: a1;
          background-color: pink !important;
        }

        .a2 {
          grid-area: a2;
          background-color: aliceblue !important;
        }

        .a3 {
          grid-area: a3;
          background-color: aqua !important;
        }

        .a5 {
          grid-area: a4;
          background-color: blue !important;
        }

        .a4 {
          grid-area: a5;
          background-color: brown !important;
        }

        .a6 {
          grid-area: a6;
          background-color: burlywood !important;
        }

        .a7 {
          grid-area: a7;
          background-color: chartreuse !important;
        }

        .a8 {
          grid-area: a8;
          background-color: darkorange !important;
        }

JavaScript

var isBroken = false;
function BreakTheGrid() {
  if (!isBroken) {
 		$('.a6').html("the<br/>left<br />columns<br />have<br />expanded<br />boo!<br />");
  } else {
  	$('.a6').html("no<br/>issue");
  }
  isBroken = isBroken==false;
}