JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
  <div class="tr clearfix">
    <div class="td">
      <div class="content">Lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots of content.</div>
    </div>
    <div class="td">
      <div class="content">I wish I was the same height as my fellow div</div>
    </div>
  </div>
</div>

CSS

.table {
    display: block;
}

.clearfix:after, .clearfix:before {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.tr {
    display: block;
    height: 100%;
}

.td {
    display: table-cell;
    width: 50%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    vertical-align: middle;
}

.td:first-child {
    background-color: teal;
}

.td:nth-child(2) {
    background-color: wheat;
}