JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div class="col" id="teste">
  <div class="col" id="teste2"></div>
  <div class="col"id="teste3"></div>
</div>

<div class="col" id="teste">
  <div class="row" id="teste2"></div>
  <div class="col"id="teste3"></div>
  <div class="col"id="teste3"></div>
</div>

<div class="col" id="teste">
  <div id="teste2"></div>
  <div class="col"id="teste3"></div>
  <div class="col"id="teste3"></div>
</div>

CSS

.col {
  position: relative;
  float: left;
  height: 100%;
}

.row {
  position: relative;
  clear: both;
  width: 100%;
}

#teste {
  background-color: red;  
}

#teste2 {
  background-color: blue;
  height: 50px;
  width: 50px;
}
#teste3 {
  background-color: grey;
  height: 50px;
  width: 50px;
}