JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="table">
      <div class="cell-1">
          table-cell
      </div>
      <div class="cell-2">
          table-cell
      </div>
  </div>
  <div class="row">
      <div class="col-1">
          floated block
      </div>
      <div class="col-2">
          floated block
      </div>
  </div>
</div>

CSS

body {
    padding: 20px;
}

.wrap {
    width: 90%;
    background: #efefef;
    box-sizing: border-box;
    padding: 0 5px;
}

.table {
    display: table;
    table-layout: fixed;
    width: 100%;
    box-sizing: border-box;
    margin: 0 -5px;
}

.cell-1, .cell-2, .col-1, .col-2 {
    border: 1px solid gray;
    border-collapse: collapse;
    height: 100px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 5px;
}

.cell-1, .cell-2 {
    display: table-cell;
}

.row {
    margin: 0 -5px;
}

.col-1, .col-2 {
    display: block;
    float: left;
}

.cell-2, .col-2 {
    width: 75%;
}

.cell-1, .col-1 {
    width: 25%;
}