JSFiddle - React, Tailwind, and code Playground

by OjisanSeiuchi

HTML

<div class="float-wrap">
  <div>
    <p>{{field 1}}</p>
    <p>{{field 2}}</p>
  </div>
 
  <div>
    <p>{{field 3}}</p>
    <p>{{field 4}}</p>
  </div>
</div>

CSS

/* (A) CLEARFIX CONTAINER */
.float-wrap { overflow: auto; }
.float-wrap::after {
  content: "";
  clear: both;
  display: table;
}
 
html { 
    background-color: darkgray;
}

.float-wrap > * { float: left; }
 
.float-wrap > * {
  color: white;
  border: 1px solid yellow;
  box-sizing: border-box;
  width: 50%; padding: 10px;
  background: darkblue;
}