JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="wrapper">
  <div class="cell image">This is cell 1</div>
  <div class="cell id">This is cell 2</div>
  <div class="cell name">This is cell 3</div>
  <div class="cell details">This is cell 4</div>
</div>

CSS

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

.cell { box-sizing: border-box; padding: 5px; border: 1px solid green;   }

.image { width: 25%; }
.id { width: 15%; }
.details, .name { width: 30%; }