JSFiddle - React, Tailwind, and code Playground

by NGLN

HTML

<div class="cols-12 count-04">
    <div class="col width-02">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="col width-03">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="col width-02">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="col width-05 last">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>
<br />
<div class="cols-12 count-01">
    <div class="col width-12 last">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisi magna, eu tincidunt dui. Proin ac magna vel arcu sagittis ullamcorper a sed justo. Nulla facilisi. In purus arcu, volutpat eu congue sed, congue in est. Nam tincidunt felis pellentesque nisl lacinia viverra. Aliquam a enim eget est luctus vehicula non a est. Quisque vel eros et mauris feugiat euismod.</p>
    </div>
</div>
<br />
<div class="cols-12 count-10">
    <div class="col width-02"><p>Lorem ipsum.</p></div>
    <div class="col width-01"><p>Lorem ipsum.</p></div>
    <div class="col width-01"><p>Lorem ipsum.</p></div>
    <div class="col width-01"><p>Lorem ipsum.</p></div>
    <div class="col width-01"><p>Lorem ipsum.</p></div>
    <div class="col width-01"><p>Lorem ipsum.</p></div>
    <div class="col width-02"><p>Lorem ipsum.</p></div>
    <div class="col width-01"><p>Lorem ipsum.</p></div>
    <div class="col width-01"><p>Lorem ipsum.</p></div>
    <div class="col width-01 last"><p>Lorem ipsum.</p></div>
</div>
<br />
<div class="cols-12 count-07">
    <div class="col width-02"><p>Lorem ipsum.</p></div>
    <div class="col width-02"><p>Lorem ipsum.</p></div>
    <div class="col width-02"><p>Lorem ipsum.</p></div>
    <div class="col width-01"><p>Lorem ipsum.</p></div>
    <div class="col width-01"><p>Lorem ipsum.</p></div>
    <div class="col width-02"><p>Lorem ipsum.</p></div>
    <div class="col width-02...

CSS

html, body {
    padding: 0;
    margin: 0;
}
.cols-12 {
    background: salmon;
    overflow: hidden;
}
.count-01 {padding-right:   0}
.count-02 {padding-right:  10px}
.count-03 {padding-right:  20px}
.count-04 {padding-right:  30px}
.count-05 {padding-right:  40px}
.count-06 {padding-right:  50px}
.count-07 {padding-right:  60px}
.count-08 {padding-right:  70px}
.count-09 {padding-right:  80px}
.count-10 {padding-right:  90px}
.count-11 {padding-right: 100px}
.count-12 {padding-right: 110px}
.col {
    background: lightSteelBlue;
    float: left;
    margin-left: 10px;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
}
.col:first-child {
    margin-left: 0;
}
.width-01 {width:   8.33%}
.width-02 {width:  16.66%}
.width-03 {width:  25.00%}
.width-04 {width:  33.33%}
.width-05 {width:  41.66%}
.width-06 {width:  50.00%}
.width-07 {width:  58.33%}
.width-08 {width:  66.66%}
.width-09 {width:  75.00%}
.width-10 {width:  83.33%}
.width-11 {width:  91.66%}
.width-12 {width: 100.00%}
.last {
    padding-right: 10px;
}
.count-01 .last {margin-right:  -10px}
.count-02 .last {margin-right:  -20px}
.count-03 .last {margin-right:  -30px}
.count-04 .last {margin-right:  -40px}
.count-05 .last {margin-right:  -50px}
.count-06 .last {margin-right:  -60px}
.count-07 .last {margin-right:  -70px}
.count-08 .last {margin-right:  -80px}
.count-09 .last {margin-right:  -90px}
.count-10 .last {margin-right: -100px}
.count-11 .last {margin-right: -110px}
.count-12 .last {margin-right: -120px}    
br {
    clear: left;
}
p {
    margin: 5px;
}