JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-4">
  <p>content for grid4</p>
</div>
<div class="grid-6">
  <p>content for grid6</p>
</div>
<div class="clearfix"></div>

CSS

.grid-4{
  float: left;
  width: 40%;
  background: red;
  padding: 0 15px;
}

.grid-6{
  float: left;
  width: 60%;
  background: blue;
  padding: 0 15px;
}

.clearfix{
  clear: both;
}