JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<button>Name</button>
<div class="container-fluid">
    <div class="row">
        <div class="span4">
             <h2 class="name">Q</h2>

        </div>
        <div class="span4">
             <h2 class="name">W</h2>

        </div>
        <div class="span4">
             <h2 class="name">E</h2>

        </div>
        <div class="span4">
             <h2 class="name">R</h2>

        </div>
        <div class="span4">
             <h2 class="name">T</h2>

        </div>
        <div class="span4">
             <h2 class="name">Y</h2>

        </div>
        <div class="span4">
             <h2 class="name">U</h2>

        </div>
        <div class="span4">
             <h2 class="name">I</h2>

        </div>
        <div class="span4">
             <h2 class="name">O</h2>

        </div>
        <div class="span4">
             <h2 class="name">P</h2>

        </div>
        <div class="span4">
             <h2 class="name">A</h2>

        </div>
        <div class="span4">
             <h2 class="name">S</h2>

        </div>
        <div class="span4">
             <h2 class="name">D</h2>

        </div>
    </div>
</div>

CSS

.span4:nth-child(3n+2) {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.span4:nth-child(3n+1) {
    padding-left: 0;
}
.span4:nth-child(3n+3) {
    padding-right: 0;
}
.span4 {
    text-align:center;
    margin: 0 0 1em 0;
}

JavaScript

$(function () {
    
    $container = $('.row');
    $container.isotope({
        itemSelector: '.span4',
        layoutMode: 'fitRows',
        getSortData: {
            name: '.name'
        }
    });
    // Add a function to re-apply it after sorted
    $container.isotope( 'on', 'arrangeComplete', function( filteredItems ) {
        for (i = 0; i < filteredItems.length; i++) {
            // Replicates :nth-child(3n+1)
            var css3n1 = (3*i)+1;
            if (filteredItems[css3n1] !== undefined) {
                $(filteredItems[css3n1].element).css({
                    'border-left': '1px solid #ccc',
                    'border-right': '1px solid #ccc',
                });
            } else {
                break;
            }
        }
    });

    $('button').click(function () {
        // Clear Styling before sorting so it can be re-applied
        $('.span4').css({
            'border-left': 'none',
            'border-right': 'none',
        });
        $container.isotope({
            sortBy: 'name'
        });
    });

});