JSFiddle - React, Tailwind, and code Playground

by Dawid Karwat

HTML

<div id="naddiv">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</div>

CSS

*{
    box-shadow: 0 0 3px 3px rgba(0,0,0,.4);
}
#naddiv{
    display:flex;
    flex-wrap:wrap;
    flex-direction: column;
    width: 400px;
    height: 400px;
    overflow-y: auto;
}
#naddiv > div{
    width: 100px;
    margin: 10px;
}
#naddiv > div:nth-child(5n){
    height: 80px;
}
#naddiv > div:nth-child(5n+1){
    height: 110px;
}
#naddiv > div:nth-child(5n+2){
    height: 40px;
}
#naddiv > div:nth-child(5n+3){
    height: 60px;
}
#naddiv > div:nth-child(5n+4){
    height: 70px;
}