JSFiddle - React, Tailwind, and code Playground

by ajthomascouk

HTML

<div id="container">
        <h1>The header of the first column</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Maecenas interdum mattis leo, id vehicula sapien ultricies et.</p>
        <p>Donec orci nunc, rhoncus ut convallis a, pretium quis elit.</p>
        <p>Aenean vulputate vulputate bibendum.</p>
        <p>Fusce imperdiet velit quis diam fermentum ut volutpat ipsum convallis.</p>
    </div>

CSS

#container { 
            width: 500px;
            -moz-column-count: 3;
            -moz-column-rule-width : 3px;
            -moz-column-rule-style : solid;
            -moz-column-rule-color : red;
            -webkit-column-count: 3;
            -webkit-column-rule-width : 3px;
            -webkit-column-rule-style : solid;
            -webkit-column-rule-color : red;
            column-count: 3;
            column-rule-width : 3px;
            column-rule-style : solid;
            column-rule-color : red;
        } 
        h1 {
            -moz-column-break-after: always;
            -webkit-column-break-after: always;
            break-after: always;
        }