JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="cols">
        <h1>Heading 1</h1>
        <p>
            This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.</p>
    </div>
    <div class="cols">
        <h1>Heading 1</h1>
        <p>
            This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.</p>
    </div>
    <div class="cols">
        <h1>Heading 1</h1>
        <p>
            This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.</p>
    </div>
    <div class="cols">
        <h1>Heading 1</h1>
        <p>
            This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.
        This is a very very long paragraph.
        </p>
    </div>
<div class="clear"></div>
</div>

CSS

h1{
    font-size:18px
}
.cols{
    float:left;
    border: 1px solid black;
    width:150px;
    height:inherit;
}
.row{
    width:610px;
    border: 1px solid black;
}
.clear{
    clear:both;
}