JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="short-and-wide">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
        <li>List item 6</li>
        <li>List item 7</li>
        <li>List item 8</li>
        <li>List item 9</li>
        <li>List item 10</li>
        <li>List item 11</li>
        <li>List item 12</li>
        <li>List item 13</li>
        <li>List item 14</li>
        <li>List item 15</li>
        <li>List item 16</li>
        <li>List item 17</li>
        <li>List item 18</li>
        <li>List item 19</li>
        <li>List item 20</li>
    </ul>
</div>

<div class="short-and-wide shorter-and-wider">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
        <li>List item 6</li>
        <li>List item 7</li>
        <li>List item 8</li>
        <li>List item 9</li>
        <li>List item 10</li>
        <li>List item 11</li>
        <li>List item 12</li>
        <li>List item 13</li>
        <li>List item 14</li>
        <li>List item 15</li>
        <li>List item 16</li>
        <li>List item 17</li>
        <li>List item 18</li>
        <li>List item 19</li>
        <li>List item 20</li>
    </ul>
</div>

CSS

.short-and-wide {
    height: 200px;
    width: 600px;
    background: #eee;
    -webkit-columns: 200px 3;
    -moz-columns: 200px 3;
    columns: 200px 3;
}

.short-and-wide.shorter-and-wider {
    height: 140px;
    width: 900px;
}

ul {
    padding: 0;
    margin: 0
}

li {
    list-style: none
}