JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<div class="row">

  <div class="col-fill">
    
     <div class="complete">
       DATA
     </div>
    
    
  </div>
  <div class="col-4">
     
     <div class="complete">
       DATA
     </div>
    
  </div>
  <div class="col-4">
    
     <div class="complete">
       DATA
     </div>
    
  </div>

</div>

CSS

.row
{
  display: flex;
  flex-wrap: wrap;
}

.col-4
{
  width: 25%;
  flex-grow: 0;
  flex-shrink: 0;
}

.col-fill
{
  flex-grow: 1;
  flex-shrink: 0;
}

.complete
{
  display: block;
  width: 100%;
  height: 70px;
  background: gainsboro;
}