JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 5px;
  grid-template-areas: " B A"
                       " B C";
}

.A { grid-area: A; }
.B { grid-area: B; }
.C { grid-area: C; }

@media ( max-width: 800px ) {
  .container { 
  grid-template-columns: 1fr;
  grid-template-areas: "A" "B" "C"; }
}

/* non-essential styles; for demo only */
.container {  height: 200px; }
.A { background-color: aqua; }
.B { background-color: gold; }
.C { background-color: lightgreen; }
.container > div {
  display: flex;
  align-items: center;
  justify-content: center;

}