JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="portfolio-list">
    <li class="ProjectWrap"></li>
    <li class="ProjectWrap"></li>
    <li class="ProjectWrap"></li>
    <li class="ProjectWrap"></li>
    <li class="ProjectWrap"></li>
    <li class="ProjectWrap"></li>
    <li class="ProjectWrap"></li>
    <li class="ProjectWrap"></li>
</ul>

CSS

ul li { float: left;
        margin: 5px;
        border: 1px solid #888;
        width: 80px;
        height: 30px; }

li#current{ background-color: #dfd; }

li#DrawerContainer{ float: none;
                    clear: both;  
                    display: block;
                    width: auto; 
                    padding: 10px;
                    background-color: #ccf; }

JavaScript

$(document).ready(function() {

    $.ajaxSetup({cache: false});
    $(".ProjectWrap,.mosaic-overlay,.mosaic-backdrop").click(function() {

    $('#current').removeAttr('id');
    $(this).attr('id', 'current');

    // find first item in next row
    var LastInRow = -1;
    var top = $(this).offset().top;
    if ($(this).next().length == 0 || $(this).next().offset().top != top) {
        LastInRow = $(this);
    }
    else {
        $(this).nextAll().each(function() {
            if ($(this).offset().top != top) {
                return false; // == break from .each()            
            }
            LastInRow = $(this);
        });
    }
    if (LastInRow === -1) {
        LastInRow = $(this).parent().children().last();
    }

    // add the extra content element
    
    // already existing, so no need to create
    if(LastInRow.next().attr('id') == 'DrawerContainer' && LastInRow.next().data('citem') == this) {
        LastInRow.next().slideToggle(500);
    }
    // not existing, add new and then slideDown
    else {
        var post_link = $(this).attr("href");
        $('#DrawerContainer').remove(); // remove existing, if any
        $('<li/>').attr('id', 'DrawerContainer') .css({display: 'none'}).data('citem', this).html("loading...").load(post_link + " #container > * ").insertAfter(LastInRow).slideDown(500);
    }

    // in any case, load content for clicked item
    // add ajax .load("url")

    $(document).ajaxSuccess(function() { // refresh heading in ajax called element
        Cufon('h1');
    });    

return false;
    });
});