JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="float-left"></div>
<div class="float-right"></div>
<button class="clear-both">BUTTON</button>
<div class="float-left"></div>
<div class="float-left"></div>
<button>BUTTON</button>
<div class="float-left"></div>
<div class="float-right"></div>
<button>BUTTON</button>

CSS

div {
  height: 100px;
  width: 200px;
  outline: solid 1px red;
}

.clear-left{
  clear: left;
}
.clear-right{
  clear: right;
}
.clear-both{
  clear: both;
  display: block;
}


.float-left{
  float: left;
  background-color:pink;
}
.float-right{
  float: right;
  background-color:yellow;
}