JSFiddle - React, Tailwind, and code Playground

by itzmeamar

HTML

<div class="sample-grid-10">
    <div class="left-grid"> ... </div>
    <div class="right-grid"> ... </div>
</div>

CSS

.sample-grid-10 {
  width:auto;
  overflow:hidden;
  margin:0 auto;
    background:#ddd;
    border:2px solid #444;
}

.sample-grid-10 .left-grid,
.sample-grid-10 .right-grid {
  margin:0 0 1.5em 2%;
  float:left;
  display:inline;
  overflow:hidden;
  word-wrap:break-word;
  min-height:1px;
}

.sample-grid-10 .left-grid {width:68%}
.sample-grid-10 .right-grid {width:30%}

.sample-grid-10 .left-grid:first-child,
.sample-grid-10 .right-grid:first-child {margin-left:0}

@media (max-width:767px) {
  .sample-grid-10 .left-grid,
  .sample-grid-10 .right-grid {
    float:none;
    display:block;
    width:auto;
    margin:0 0 1.5em 0;
  }
}