JSFiddle - React, Tailwind, and code Playground

by imehesz

HTML

<div class="container">
  <div class="container column">
    <div class="item i1">1</div>
    <div class="item i2">2</div>
  </div>

  <div class="container">
    <div class="item i3">3</div>
  </div>
</div>

CSS

/* Desktop */
.container {
  display: flex;
  flex-wrap: wrap;
}
.container > * {
  flex-grow: 1;
}
.item {
  margin: 2px;
}
.column {
  flex-direction: column;
}
.fill {
  width: 100%;
}

/* Pretty */
.i1 { background: #FF7676; }
.i2 { background: #C2FF76; }
.i3 { background: #FF9BF7; }
.i4 { background: #9BA4FF; }