JSFiddle - React, Tailwind, and code Playground

by Grzegorz Rozdzialik

HTML

<div class="content-wrapper">
    <div class="column">
        <p>Vestibulum auctor tempus aliquet. Ut gravida nulla eu augue ornare, et auctor risus mattis. Donec ac est mattis, tincidunt elit nec, placerat leo. Vivamus faucibus velit eget lectus lobortis aliquam. Integer vehicula, mauris eu tincidunt aliquam, lacus enim cursus felis, vel interdum quam enim sit amet arcu. Aliquam ut semper est. Mauris accumsan venenatis mauris et pharetra. Ut pulvinar est turpis, semper varius elit varius et. Phasellus scelerisque vehicula mi, sed dapibus eros finibus eu. Aliquam erat volutpat. Sed finibus mi tempus commodo varius. Nullam a rhoncus dui.</p>
    </div>
    <div class="column">
        <p>Nulla consequat, nisi a elementum eleifend, lorem mi sollicitudin odio, in porta mi mi tempor magna. In porttitor libero id ligula tincidunt, nec lobortis lacus consectetur. Mauris pretium porta auctor. Sed pretium orci quis tortor pulvinar, viverra pharetra tortor tincidunt. Fusce vel mi at sem posuere bibendum quis eu neque. In rhoncus ligula et dui dictum, ut viverra turpis vulputate. Mauris faucibus, arcu vitae suscipit dignissim, eros ipsum molestie mi, in vulputate augue nulla ac diam.</p>
    </div>
    <div class="column">
        <p>Vivamus rutrum posuere congue. Donec nec elementum justo. Sed sit amet augue mauris. Fusce pellentesque hendrerit est sit amet malesuada. Nulla sodales nisi a urna pharetra luctus. Nullam convallis dui quam, quis dictum purus dictum vel. Donec maximus nec arcu rutrum dictum.</p>
    </div>
    <div class="clearfix"></div>
</div>
<div class="content-wrapper">
    <div class="column">
        <button role="button">Button 1</button>
    </div>
    <div class="column">
        <button role="button">Button 2</button>
    </div>
    <div class="column">
        <button role="button">Button 3</button>
    </div>
    <div class="clearfix"></div>
</div>

CSS

html {
    box-sizing: border-box;
}
* {
    box-sizing: inherit;
}
.content-wrapper {
    width: 100%;
    margin-bottom: 10px;
}
.column {
    float: left;
    width: 33.3%;
    border: solid 1px black;
    border-left: none;
}
.column:first-of-type {
    border-left: solid 1px black;
}
.clearfix {
    clear: both;
}