JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="row">
    <div class="column center-contain">
        <div class="center-this">
            <p>This is a long paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis venenatis arcu. In sodales sapien tristique, rutrum lectus sed, pretium enim. Nulla facilisi. Aliquam laoreet sollicitudin arcu, eu molestie justo placerat sit amet. Sed ornare id massa ac volutpat. Vivamus eleifend lorem non risus dignissim accumsan.</p>
        </div>
    </div>
    <div class="column center-contain">
        <div class="center-this">
            <p>This is a long paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis venenatis arcu. In sodales sapien tristique, rutrum lectus sed, pretium enim. Nulla facilisi. Aliquam laoreet sollicitudin arcu, eu molestie justo placerat sit amet. Sed ornare id massa ac volutpat. Vivamus eleifend lorem non risus dignissim accumsan.</p>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis venenatis arcu. In sodales sapien tristique, rutrum lectus sed, pretium enim. Nulla facilisi. Aliquam laoreet sollicitudin arcu, eu molestie justo placerat sit amet. Sed ornare id massa ac volutpat. Vivamus eleifend lorem non risus dignissim accumsan.</p>
        </div>
    </div>
</div>

CSS

/* clearfix */
.row:before, .row:after { content: " "; display: table; }
.row:after { clear: both; }

/* simple 2 column float */
.row {
    *zoom:1; /* clearfix */
    background: #ffc7a8;
}
  
.column {
    display: inline-block;
    width: calc(50% - 2px);
    vertical-align: middle;
}