JSFiddle - React, Tailwind, and code Playground

by Ersin Bilgin

HTML

<div class="parent"><div class="child child1"></div>
<div class="child child2"></div>
<div class="child child3"></div></div>
<div class="parent"><div class="child child4"></div>
<div class="child child5"></div>
<div class="child child6"></div></div>

CSS

.parent{
    clear: both;
    width: 100%;
    height: 200px;
    margin: 20px 0;
    border: 1px solid #000;
}

.child {
    float: left;
    margin: 10px;
    height: 20px;
    border: 1px solid #000;
}

.child1 {
    width: 200px;
}

.child2 {
    width: 100px;
}

.child3 {
    width: 400px;
}

.child4 {
    width: 200px;
}

.child5 {
    width: 100px;
}

.child6 {
    width: 140px;
}