JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="head">Заголовок</div>
  <div>Список 1</div>
  <div>Список 2</div>
  <div>Позиция 1. Списка 1 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa aliquam ipsa alias molestias accusamus enim veritatis! Pariatur fugiat maiores fuga sed nisi itaque quisquam, recusandae, accusamus cumque. Facilis, ipsum, vitae?</div>
  <div>Позиция 1. Списка 2</div>
  <div>Позиция 2. Списка 1</div>
  <div>Позиция 2. Списка 2 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolorum!</div>
  <div>Позиция 3. Списка 1</div>
  <div>Позиция 3. Списка 2</div>
</div>

CSS

html,
body {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

.grid {
  //display: grid;
  //grid-template-columns: 1fr 1fr;
  //grid-template-rows: 50px repeat(auto-fit, auto);
  display: flex;
  flex-wrap: wrap;
  background-color: #1aaa00;
  height: 100%;
  text-align: center;
}

.grid>div:not(.head) {
  width: 50%;
  outline: 1px dashed #666;
}

.head {
  width: 100%; //grid-area: 1 / 1 / 3 / 3;
}

@media (max-width: 500px) {
  .grid>div:not(.head) {
    width: 100%;
  }
  .grid>div:not(.head):nth-child(odd) {
    order: 2;
  }
}