JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-container">
  <div class="top-content">top content</div>
  <div class="sidebar">sidebar</div>
  <div class="other-content">other content</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 3fr;
  grid-gap: .5em;
  height: 100vh;
  background-color: gray;
}

.top-content {
  grid-column: 1;
  background-color: orangered;
  border: 1px dashed black;
}

.sidebar {
  grid-column: 2;
  grid-row: 1 / -1;
  background-color: aqua;
  border: 1px solid black;
}

.other-content {
  grid-column: 1;
  background-color: lightgreen;
  border: 1px dashed black;
}

body {
  margin: 0;
}

@media (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .sidebar {
    grid-column: 1;
    grid-row: 2;
  }
}