JSFiddle - React, Tailwind, and code Playground

by avrelian

HTML

<div class="left-float">Rawr</div>
<div class="left-float">Blag</div>
<div class="left-float">Bloo</div>
<div class="left-float special before_wide">I don't want to be last in the row!</div>
<div class="left-float wide">Blah</div>
<div class="left-float">Blah</div>
<div class="left-float">Rawr</div>
<div class="left-float">Blag</div>
<div class="left-float">Bloo</div>
<div class="left-float special before_normal">I don't want to be last in the row!</div>
<div class="left-float normal">Blah</div>
<div class="left-float">Blah</div>
<div class="left-float">Rawr</div>
<div class="left-float">Blag</div>
<div class="left-float">Bloo</div>
<div class="left-float special before_narrow">I don't want to be last in the row!</div>
<div class="left-float narrow">Blah</div>
<div class="left-float">Blah</div>

CSS

div {
    font-size: 70%;
}
.left-float { 
    width:60px; 
    height:60px; 
    background-color:red; 
    float:left; 
    margin:0 5px 5px 0;
}
.narrow {width:  60px;}
.normal {width: 125px;}
.wide   {width: 190px;}
.special { 
    background-color:green; 
    margin:0 5px 5px 0;
}

.before_narrow {margin-right: 70px;}
.before_normal {margin-right:135px;}
.before_wide   {margin-right:200px;}

.special + .narrow{
    background-color:blue;
    margin-left: -65px;
}
.special + .normal{
    background-color:blue;
    margin-left: -130px;
}
.special + .wide{
    background-color:blue;
    margin-left: -195px;
}