JSFiddle - React, Tailwind, and code Playground

by drublic

HTML

<div class="row">
    <p><strong>First Paragraph</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus elit ut neque molestie ac pulvinar diam gravida. Suspendisse potenti. Duis vitae est ut mauris laoreet suscipit vel ut libero. Aliquam sapien urna, facilisis nec facilisis sit amet, dapibus sed nunc. Phasellus ornare nunc a nulla venenatis sed adipiscing elit ultrices. Suspendisse potenti. Nulla facilisi. Suspendisse vel erat at orci laoreet varius vitae non sem. Sed sodales sodales augue sit amet laoreet. Aliquam rhoncus lacus non mi egestas vitae porta dui dictum. Nullam vestibulum, diam at iaculis dignissim, mauris augue hendrerit augue, ac sollicitudin diam felis tempor dui. Duis et eros sed quam consectetur consequat vitae quis sem. Nunc dictum porttitor scelerisque. Aliquam ullamcorper, orci vitae tincidunt egestas, lectus quam dictum nulla, in venenatis dui erat vel dolor. Suspendisse semper varius sem, non bibendum diam pharetra eget. Proin orci felis, auctor eu adipiscing non, consectetur non tortor.</p>
    <p><strong>Second Paragraph</strong> Maecenas nec dictum tortor. Nullam quam libero, luctus id pulvinar et, auctor eu massa. Ut id lorem ut diam porttitor malesuada in id nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel felis dui. Proin bibendum tellus vitae quam sodales sit amet vulputate arcu scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque purus massa, suscipit nec euismod at, adipiscing eget dolor. Fusce eu velit augue, at suscipit massa. Donec in magna sed tortor fringilla congue. Morbi ut turpis id dolor vulputate commodo posuere ut orci. Aenean vitae volutpat dolor. Etiam lectus tortor, gravida vel bibendum ac, molestie et augue. Duis velit quam, semper non aliquet nec, consectetur in arcu. Nulla facilisi. Ut scelerisque tincidunt eros, at adipiscing est dapibus in.</p>
    <p><strong>Third Paragraph</strong> Maecenas malesuada quam ut...

CSS

p { text-align: justify; }
strong { font-weight: bold; }
.row {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
}

JavaScript

/*

    Because of the manual split the 2nd paragraph has been split into two parts and because of the p-tag the last line is an orphan.

=> is there a way to justify the line like the aboves

*/