JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div class="button">Click</div>
        <div class="class1">
            <div class=".name" id="<%: item.id %>">
                Name
            </div>
            <div class="image">
                <img src="" style="height:85px" alt="Picture" />
            </div>
            <div class="container">
                <div class=".description">
                    <h2>Title</h2>
                    Some text
                </div>
                <div class=".info">
                    some info
                </div>
                <div class=".pic">
                    <img src="" style="height:30px" alt="some pic"/>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

.button {background:red;}
.class1 {
    width:400px;
    height:100px;
    margin-top:15px; 
    display:none;
}
.name {
    width:100px;
    height:15px; 
    position:absolute;
}
.image { 
    width:100px;
    height:85px; 
    margin-top:15px; 
    position:absolute; 
    text-align:center; 
}
.container {
    width:300px; 
    height:100px; 
    margin-left:100px; 
    background-color: white; 
    position:absolute; 
    border:1px solid black
}
.description {
    width:215px; 
    height:100px; 
    margin-left:5px; 
    margin-right:5px; 
    float:left
}
.info {
    width:75px; 
    height:60px; 
    margin-top:10px; 
    float:left; 
    text-align:center
}
.pic {
    width:75px; 
    height:30px; 
    float:left; 
    text-align:right;
}

JavaScript

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

jQuery.extend(jQuery.easing, {
     easeInOutQuad: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
    }
});