JSFiddle - React, Tailwind, and code Playground

by ilyasnone

HTML

<ul id = "limheight">
 <li><a href="">Glee is awesome 1Glee is awesome 1Glee is awesome 1Glee is awesome 1Glee is awesome 1</a></li>
 <li><a href="">Glee is awesome 2</a></li>
 <li><a href="">Glee is awesome 3</a></li>
 <li><a href="">Glee is awesome 4</a></li>    
 <li><a href="">Glee is awesome 5</a></li>
 <li><a href="">Glee is awesome 6</a></li>
 <li><a href="">Glee is awesome 7</a></li>
 <li><a href="">Glee is awesome 8</a></li>
 <li><a href="">Glee is awesome 9</a></li>
 <li><a href="">Glee is awesome 10</a></li>
 <li><a href="">Glee is awesome 11</a></li>
 <li><a href="">Glee is awesome 12</a></li>    
 <li><a href="">Glee is awesome 13</a></li>
 <li><a href="">Glee is awesome 14</a></li>
 <li><a href="">Glee is awesome 15</a></li>
 <li><a href="">Glee is awesome 16</a></li>
 <li><a href="">Glee is awesome 17</a></li>    
 <li><a href="">Glee is awesome 18</a></li>
 <li><a href="">Glee is awesome 19</a></li>
 <li><a href="">Glee is awesome 20</a></li>
</ul>

CSS

#limheight {
  width:50%;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2; /*3 is just placeholder -- can be anything*/
}
#limheight li {

    padding-bottom: 20px;    
}
#limheight li a {
    color: rgb(0, 162, 232);
}