JSFiddle - React, Tailwind, and code Playground

by jakelauer

HTML

<div class="container">
<div class="item item-1">

</div>
<div class="item item-2">

</div>
<div class="item item-3">

</div>
<div class="item item-4">

</div>
</div>

CSS

* { box-sizing: border-box; }

.container{
  display: block;
  width: 100%;
  height: 300px;
  background: green;
  flex-direction: vertical;
  flex-wrap: wrap;
}

.item{
  float: left;
  height: 100%;
  background: red;
  margin: 0 5px;
}

.item-1{
  width: calc(50% - 10px);
}

.item-2,
.item-3,
.item-4{
  width: calc(25% - 10px);
}

.item-3
{
  margin-bottom: 10px;
}

.item-3,
.item-4
{
  height: calc(50% - 5px);
}