JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.container > div {
    border: solid 1px black;
    height: 50px;
    width: 100px;
    margin-bottom: 5px;
    margin-left: 5px;
    position: absolute;
}

.container {
  width: 321px;
  height: auto;
    position: absolute;
}

.expanded {
  position: absolute;
    z-index: 2;
    background-color: blue;
}

JavaScript

$(function() {
    var box_width = 100,
        box_margin = 5;
    $('.container > div').each(function(i) {
        
        $(this).css('left', (box_width * i) + box_margin + 'px');
    });
    
    
    
 $('.container > div').click(function() {
    var pos = $(this).position();
    $(this).animate({
        'height' : '107px'
    })
    .addClass('expanded').css('left', pos.left + 'px');
  });
 });