JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-cols">
  <div class="col-flex">
    <div class="flex-rows">
      <div class="row-flex">
        Hello
      </div>
      <div class="row-flex">
        World
      </div>
    </div>
  </div>
  <div class="col-flex">
    <div class="flex-rows">
      <div class="row-flex">
        Hello, hello, hello! This is a bunch of extra text to explain what should happen. Ideally, this will take up as much room as needed, and the div below will take up an equal amount to force a vertical 50/50 split.
      </div>
      <div class="row-flex">
        World
      </div>
    </div>
  </div>
   <div class="col-flex">
    <div class="flex-rows">
      <div class="row-flex">
        Hello
      </div>
      <div class="row-flex">
        World
      </div>
    </div>
  </div>
</div>

CSS

.flex-cols {
  display: flex;
  width: 100%;
  flex-direction: row;
}

.col-flex {
  display: flex;
  flex: 1;
  flex-basis: 100%;
  flex-direction: column;
  margin-right: 20px;
  border: 1px solid green;
  padding: 5px;
}

.flex-rows {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.row-flex {
  border: 1px solid red;
  display: flex;
  flex: 1;
  flex-basis: 100%;
  flex-direction: column;
  margin-bottom: 20px;

}