JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row box-container">
  <div class="col-6">
    <div class="row">
      <div class="col-6">Item 1</div>
      <div class="col-6">Item 2</div>
      <div class="col-6">Item 3</div>
      <div class="col-6">Item 4</div>
      <div class="col-6">Item 5</div>
      <div class="col-6">Item 6</div>
    </div>
  </div>
</div>

CSS

.row {
      display: block;
    }

    .col-6 {
      float: left;
    }

    @supports (display: flex) {
      .row {
        display: flex;
      }
    }