JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<ul>
    <li>
        <div class="item">
               <div class="inside">click me if you dare</div>
        </div>
    </li>
    <li>
        <div class="item">
               <div class="inside">click me if you dare</div>
        </div>
    </li>
    <li>
        <div class="item">
               <div class="inside">click me if you dare</div>
        </div>
    </li>
    <li>
        <div class="item">
               <div class="inside">click me if you dare</div>
        </div>
    </li>
    <li>
        <div class="item">
               <div class="inside">click me if you dare</div>
        </div>
    </li>
    <li>
        <div class="item">
               <div class="inside">click me if you dare</div>
        </div>
    </li>
    <li>
        <div class="item">
               <div class="inside">click me if you dare</div>
        </div>
    </li>
    <li>
        <div class="item">
               <div class="inside">click me if you dare</div>
        </div>
    </li><li>
        <div class="item">
               <div class="inside">click me if you dare</div>
        </div>
    </li>
    <li>
        <div class="item">
               <div class="inside">click me if you dare</div>
        </div>
    </li><li>
        <div class="item">
               <div class="inside">click me if you dare</div>
        </div>
    </li>
</ul>

CSS

ul li{
    display: inline-block;
    vertical-align: top;
    width: 200px;
    height: 200px;
    background-color: red;
    margin-right: 10px;
    margin-bottom: 10px;
}
.inside{
    height: 200px;
}
li.expanded-item{
    height: 450px;
}
li .expanded{
    position: absolute;
    left: 0;
    top: auto;
    right: 0;
    background-color: #bada55;
    height: 250px;
}

JavaScript

$( ".item" ).click(function( e ){

    var el = $( e.currentTarget );
    
    el.parent().append(
        "<div class='expanded'>i'm expanded</div>"
    ).addClass( "expanded-item" );

}).on( "click", ".expanded", function( e ){
    $( e.currentTarget ).remove()
        .parent().removeClass( "expanded-item" );
    
});