JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<div class='row'>
  <div class='col col-1'></div>
  <div class='col col-2'></div>
  <div class='col col-3'></div>
</div>

SCSS

.row {
  display: flex;
  flex-flow: row wrap;
}
.col {
  height: 30px;
  background: lime;
  border: 1px solid white;
  padding: 0 10px;
}

.col-1 {
  flex: 0 0 16.6%;
}

.col-2 {
  flex: 0 0 58.3%;
}

.col-3 {
  flex: 0 0 25%;
}