JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inside">
    <div class='coll_base'>content</div>
</div>
<div class="inside">
    <div class='coll_base'>content</div>
</div>

CSS

.inside {
    width: 100px;
    height: 100px;
    position: relative;
    border: 1px dashed red;
}

.coll_base {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    background: orange;
}

JavaScript

var inside = $('.inside');

inside.hover(
    function() {
        if(!inside.data('bottom')) {
            inside.data('bottom',$(this).children(".coll_base").css('bottom'));
        }
        $(this).children(".coll_base").stop().animate({ bottom:'+=30px' },"slow")
            }, 
     function() {
            $(this).children(".coll_base").stop().animate({bottom:$(this).data('bottom') },"slow");
});