JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
 <div class="group">
  <div class="table-row table-head table-head-main">
   <div class="table-cell">Col 1</div>
   <div class="table-cell">Col 2</div>
  </div>
  <div class="table-row">
   <div class="table-cell">1.1</div>
   <div class="table-cell">1.2</div>
  </div>
 </div>
 <div class="group">
  <div class="table-row table-head">
   <div class="table-cell">Col 1</div>
   <div class="table-cell">Col 2</div>
  </div>
  <div class="table-row">
   <div class="table-cell">2.1</div>
   <div class="table-cell">2.2</div>
  </div>
 </div> 
</div>

CSS

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
  width: 100%;
}

.table-head div {
  background: #cccccc;
}

.table-cell {
  display: table-cell;
  border: 1px dotted #000000;
}

.table-head {
  display: none;
}

.table-head-main {
  display: table-row;
}

.group {
  display: table-row-group;
}

@media (min-width: 600px) {
  .table-head {
    display: table-row;
  }
  .group {
    display: table;
    float: left;
    width: 50%;
  }
}