JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <body>
        <div id="slidebottom" class="slide">
            <button>slide it</button>
            <div class="inner">This is supposed to slide in from the left</div>
        </div>
    </body>

</html>

CSS

.slide {
    position: relative;
    overflow: hidden;
    height: 120px;
    width: 350px;
    margin: 1em 0;
    background-color: #ffc;
    border: 1px solid #999;
}
.slide .inner {
    position: absolute;
    left: -350px;
    bottom: 0;
    width: 338px;
    height: 36px;
    padding: 6px;
    background-color: #4c5;
    color: #333;
}
#slidebottom .inner {
    display:none;
}
.slide button {
    margin: .7em 0 0 .7em;
}

JavaScript

$(document).ready(function () {
    $('#slidebottom button').click(function () {
        var $lefty = $(this).next();
        $lefty.show();
        $lefty.animate({
            left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0,
            opacity: "show"
        });
    });
});