JSFiddle - React, Tailwind, and code Playground

by Ritesh Pandey

HTML

<div>
    <div>
    <span class="first-row">I</span>
    <span class="first-row">am</span>
    <span class="first-row">an</span>
    </div>
    <div class="clear-both"></div>
    <div>engineer,</div>
    <div>
    <span class="third-row">I</span>
    <span class="third-row">love</span>
    <span class="third-row">software</span>
    <span class="third-row">programming</span>
    <span class="third-row">a lot</span>
    </div>
    <div class="clear-both"></div>
</div>

CSS

div {
    border: 1px solid black;
    text-align: center;
}
.first-row {
    display: block;
    width: 32%;
    float: left;
}
.third-row {
    display: block;
    width: 19%;
    float: left;
}
.clear-both {
    clear: both;
}