JSFiddle - React, Tailwind, and code Playground

by Sam Tyson

HTML

<div id="main">
    <div class="article">1</div>
    <div class="article">2</div>
    <div class="article">3</div>
    <div class="article">4</div>
    <div class="article">5</div>
    <div class="article">6</div>
    <div class="article">7</div>
    <div class="article">8</div>
    <div class="article">9</div>
    <div class="article">10</div>
    <div class="article">11</div>
    <div class="article">12</div>
    <div class="article">13</div>
    <div class="article">14</div>
    <div class="article">15</div>
    <div class="article">16</div>
    <div class="article">17</div>
    <div class="article">18</div>
    <div class="article">19</div>
    <div class="article">20</div>
</div>

CSS

.article {
    display: absolute;
    top: 0;
}

JavaScript

var pair = 0;
$('#main .article').slice(6).each(function(i) {
    var second = i%2 > 0;
    //$(this).append(' ' + pair);
    var topPx = pair * 24;
    var leftPx = pair * 24 + (second? 10 : 0);
    $(this).css({ top: topPx, left: leftPx });
    if(second) pair++;
});