JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML> <html>     <head>         <meta charset="UTF-8">         <title>Gordian Solutions</title>         <link rel="stylesheet" href="./css/core.css" media="all" />     </head>     <body>         <article style="margin: 1em 10% 1em 10%;">             <section class="columnHolder">                 <h1>2 Column Test</h1>                 <div class="column half">                     <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>                 </div>                 <div class="column half">                     <p> Proin ornare, nisl et vestibulum dignissim, purus odio scelerisque massa, in mollis dolor neque nec massa. Vestibulum neque ipsum, sodales sit amet dapibus a, viverra sit amet est. Mauris odio mi, semper vel ultricies ac, hendrerit eget tortor. Quisque eu mi tellus, nec iaculis lectus. Duis pellentesque, ipsum nec molestie aliquet, lorem urna scelerisque risus, quis venenatis nibh dolor ac elit. Duis vitae nisi ante. <a href="#">Morbi dictum ornare</a> justo in fermentum. </p>                 </div>             </section>             <section class="columnHolder">                 <h1>4 Column Test</h1>                 <div class="column quarter">                     <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non...

CSS

.columnHolder {     overflow: hidden;     background: #EFE; /* For layout testing only! */     margin: .5em 0;     padding: 0; } .columnHolder h1 {     background: #EFF; /* For layout testing only! */ } .column {     float: left;     margin: .5%;     background: #FFE; /* For layout testing only! */     text-align: justify; } .column.half {     width: 49%; } .column.third {     width: 32.33333% } .column.quarter {     width: 24%; } .column.fifth {     width: 19%; } .column.sixth {     width: 15.66666%; } .column.seventh {     width: 13.28571%; } .column.eighth {     width: 11.5%; } .column.ninth {     width: 10.11111%; } .column.tenth {     width: 9%; }