JSFiddle - React, Tailwind, and code Playground

by manoj jasti

HTML

<div id="container">
    <div class="flex-column">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
        <div class="items">7</div>
        <div class="items">8</div>
        <div class="items">9</div>
        <div class="items">10</div>
        
        <div class="magic"></div>
    </div>
    <div class="flex-column">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="magic"></div>
    </div>
    <div class="flex-column">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="magic"></div>
    </div>
    <div class="flex-column">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="magic"></div>
    </div>
    <div class="flex-column">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
        <div class="items">7</div>
        <div class="magic"></div>
    </div>
    <div class="flex-column">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
        <div class="items">7</div>
        <div class="items">8</div>
        <div class="items">9</div>
        <div class="items">10</div>
        <div class="items">11</div>
        <div class="items">12</div>
        <div class="items">13</div>
        <div class="magic"></div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
body {
    background: #ddd;
    overflow: auto;
}
#container {
    height: 520px;
    border-collapse: collapse;
    display: flex;
    flex-flow: row nowrap;
}
#container .flex-column {
    border: 1px solid #fff;
    flex: 1 0 auto;
    display: flex;
    flex-flow: column wrap;
}
#container .flex-column .items {
    width: 150px;
    height: 150px;
    line-height: 150px;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    background: tomato;
    color: #fff;
    font-size: 1em;
}
#container .flex-column .magic {
    height: 0;
    margin: 0;
    padding: 0;
    visibility: collapse;
}
/* 2 columns */
 #container .flex-column .magic:nth-child(n+5):nth-child(-n+7) {
    width: 340px;
}
/* 3 columns */
 #container .flex-column .magic:nth-child(n+8):nth-child(-n+10) {
    width: 510px;
}
/* 4 columns */
 #container .flex-column .magic:nth-child(n+11):nth-child(-n+13) {
    width: 680px;
}
/* 5 columns */
 #container .flex-column .magic:nth-child(n+14):nth-child(-n+16) {
    width: 850px;
}