JSFiddle - React, Tailwind, and code Playground

HTML

<div id="col1"></div>
<div id="col2"></div>

CSS

body {
    margin: 0;
    padding: 0;
}

#col1, #col2 {
    width: 50%;
    height: 500px;
    display: block;
    float:left;
    position: relative;
}

#col1 {
    z-index: 10;
}

.colItem {
    background: #55ff55;
    width: 90%;
    height: 50px;
    display: block;
    margin: 10px 5%;
    z-index: 10;
}

.absColItem {
    position: absolute;
    width: 90%;
    height: 25px;
    background: #5f5f5f;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(15%,rgba(30,87,153,0.8)), color-stop(19%,rgba(30,87,153,1)), color-stop(20%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(80%,rgba(30,87,153,1)), color-stop(81%,rgba(30,87,153,1)), color-stop(85%,rgba(30,87,153,0.8)), color-stop(100%,rgba(30,87,153,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* Chrome10+,Safari5.1+ */
    z-index: 5;
}

JavaScript

var $col1 = $('#col1'),
    $col2 = $('#col2'),
    numItems = 10;

for (var i = 0; i < 8; i++) {
    $col1.append($('<div>').addClass('colItem'));
}

$col1.find('.colItem').on('click', function() {
    $col2.find('.absColItem').each(function() {
        $(this).animate({
            'opacity': 0,
            'top': $(this).data('parent').position().top + 22
        }, 200, function(){
            $(this).remove();
        });
    });
    
    $newItem = $('<div>').addClass('absColItem');
    $newItem.css({'top': $(this).position().top + 22, 'left': 10});
    $col2.append($newItem); 
    var itemHeight = $newItem.height();
    $newItem.remove();
    
    var totalTopSpace = Math.floor(($(this).position().top + 22 + itemHeight) / (itemHeight + 10));
    var totalBotSpace = Math.floor(($col2.height() - ($(this).position().top + 22 + itemHeight + 10)) / (itemHeight + 10));
    
    var topItems = Math.floor(numItems / 2),
        bottomItems = numItems - topItems;
    if (totalTopSpace < topItems) {
        topItems = totalTopSpace;
        bottomItems = numItems - topItems;
    } else if (totalBotSpace < bottomItems) {
        bottomItems = totalBotSpace;
        topItems = numItems - bottomItems;
    }
    
    
    
    for(var j = 0; j < topItems; j++) {
        $col2.append(
            $('<div>')
                .addClass('absColItem')
                .css({
                    'top': $(this).position().top + 22,
                    'left': '-100px'                    
                })
                .animate({
                    'left': 0
                }, 100)
                .animate({
                    'top': ($(this).position().top + 22) - (j * (itemHeight + 10))
                }, (j + 1) * 500)
                .data('parent', $(this))
                
        );
    }
    
    for (var k = 0; k < bottomItems; k++) {
         $col2.append(
            $('<div>')
                 .addClass('absColItem')
                 .css({
                    ...