JSFiddle - React, Tailwind, and code Playground

by jack_pallot

HTML

<div id="container">
   <div id="col1">
       <h1>Paragraph 1</h1>
       <p>Lorem ipsum dolor sit amet, vidisse evertitur vix in, duis aeterno constituam has te. Eos ex paulo partem menandri. Ut adversarium contentiones comprehensam duo. Omnis detracto ea est. Veritus elaboraret sed ne.</p>

           <p>Quo vidisse saperet dissentias at, eu sed graece populo molestiae. Id mandamus explicari nam, ei mea doctus animal, te quem mnesarchum vim. Ea pri eirmod option apeirian. Cu quando quaeque propriae usu, detraxit adipisci at usu, fabulas suscipiantur at pri. Eos ut falli voluptatum, mea sint suavitate voluptatibus at. Electram efficiendi mei ne, in solet scaevola sea, pri dicit lobortis ex.</p>
    </div>
    <div id="col2">
       <h2>Paragraph 2</h2>
        
       <p>Lorem ipsum dolor sit amet, vidisse evertitur vix in, duis aeterno constituam has te. Eos ex paulo partem menandri. Ut adversarium contentiones comprehensam duo. Omnis detracto ea est. Veritus elaboraret sed ne.</p>

           <p>Quo vidisse saperet dissentias at, eu sed graece populo molestiae. Id mandamus explicari nam, ei mea doctus animal, te quem mnesarchum vim. Ea pri eirmod option apeirian. Cu quando quaeque propriae usu, detraxit adipisci at usu, fabulas suscipiantur at pri. Eos ut falli voluptatum, mea sint suavitate voluptatibus at. Electram efficiendi mei ne, in solet scaevola sea, pri dicit lobortis ex.</p>
    </div>
</div>

CSS

#container {

}

#col1, #col2 {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
     -moz-column-width: 20%;
     -webkit-column-width: 20%;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px; 
}

#col1 {
    color: red;
}

#col2 {
    color: blue;
}