JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="foo">
    <div class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis incidunt tempora vero, velit maiores libero blanditiis suscipit iste voluptatum ut.</div>
    <div class="bar">Libero magnam, quod dolore similique hic illo quo voluptate, cupiditate, est inventore at perspiciatis laudantium officia? Perferendis facilis vel distinctio.</div>
</div>

<div class="foo">
    <div class="baz">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis incidunt tempora vero, velit maiores libero blanditiis suscipit iste voluptatum ut.</div>
    <div class="baz">Libero magnam, quod dolore similique hic illo quo voluptate, cupiditate, est inventore at perspiciatis laudantium officia? Perferendis facilis vel distinctio.</div>
</div>

CSS

* {
    box-sizing: border-box;
}

.foo {
    display: flex;
}
.bar, .baz {
    flex-basis: 50%;
    background: skyblue;
}
.bar:last-child {
    padding-left: 5rem;
}

.baz:last-child {
    margin-left: 5rem;
}