JSFiddle - React, Tailwind, and code Playground

HTML

<html>

    <body>
        <div class="button">Click</div>
        
<div style="width:450px;height:300px;margin-top:15px; display:block;overflow:hidden;" class="class1">
    <div style="width:100px;height:15px;" class="name" id="<%: item.id %>">
        Name
    </div>
    <div style="width:100px;height:85px; margin-top:15px;text-align:center;">
        <img src="" style="height:85px" alt="Picture" />
    </div>
    
    <div style="width:300px; height:100px; margin-left:100px; background-color: white;border:1px solid black">
        <div style="width:215px; height:100px; margin-left:5px; margin-right:5px; float:left">
            <h2>Title</h2>
            Some text
        </div>
        <div style="width:75px; height:60px; margin-top:10px; float:left; text-align:center">
            some info
        </div>
        <div style="width:75px; height:30px; float:left; text-align:right;">
            <img src="" style="height:30px" alt="some pic"/>
        </div>
    </div>
            </div>
    </body>
</html>

CSS

#wrap{position: relative;height:200px}

.button{background:red;}

.banner{background:blue;width:100%;height:20px;position:absolute;bottom:0px;left:0px;}

JavaScript

$(document).ready(function() {
    $('.button').click(function() {
        $('.class1').slideToggle();
    });
});