JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<ul>
    <li><div>1</div></li>
    <li><div>2<br/>a</div></li>
    <li><div>3</div></li>
    <li><div>4</div></li>
    <li><div>5</div></li>
    <li><div>6</div></li>
    <li><div>7</div></li>
    <li><div>8</div></li>
    <li><div>9</div></li>
    <li><div>10</div></li>
    <li><div>11</div></li>
</ul>

CSS

body { direction: rtl; }

li {
    margin: 5px;

    background: #ccc;
    border: solid 1px red;

}

div {
    -webkit-transform: rotateZ(90deg);
}

/*li:nth-child(4n+1) { clear: left; }*/

ul {
    
    position: relative;
    left: -250px;
    
    width: 130px;            
    height: 130px;
    -webkit-column-count: 3;
    -webkit-column-gap: 5px;
       
    /*-webkit-transform: rotateZ(-90deg);*/

}


li {
/*    -webkit-transform: rotateZ(90deg);*/

}

JavaScript

/* 
Original demo by Fabrizio Calderan
http://stackoverflow.com/questions/8705323/2-row-element-layout-within-horizontal-div/8705916#8705916
*/