CSS and HTML two by two / quadrant chart

structure.html

<div class="example2by">
  <div class="two-by-two">
    <div class="row-label"><div class="rotate-label">Top Vertical</div></div>
    <div class="cell">Top Left Box</div>
    <div class="cell">Top Right Box</div>
    <div class="row-label"><div class="rotate-label">Bottom Vertical</div></div>
    <div class="cell">Bottom Left Box</div>
    <div class="cell">Bottom Right Box</div>
    <div class="cell-spacer">&nbsp;</div>
    <div class="col-label">Left Horizontal</div>
    <div class="col-label">Right Horizontal</div>
  </div>
</div>

styles.css

  .example2by {
    background-image: linear-gradient(to top right, cyan, yellow);
    width: 90%;
    margin: 0 auto 2rem auto;
  }
  
  .two-by-two {
    display: grid;
    grid-template-columns: min-content 1fr 1fr;
    grid-template-rows: 1fr 1fr min-content;
    grid-gap: 0px;
    text-align: center;
  }
  
  .cell {
    padding: 2rem 1rem;
    background: transparent;
    border: 1px solid white;
    font-weight: bold;
    color: darkslategrey;
  }
  
  .cell-spacer {
    background: white;
  }
  
  .row-label {
    width: 2em;
    background: white;
  }
  
  .col-label {
    background: white;
  }
  
  .rotate-label {
    writing-mode: vertical-rl;
    transform: rotate(190deg);
    transform-origin: bottom 0;
    white-space: nowrap;
    padding: 2em 0 2em 0;
  }