JSFiddle - React, Tailwind, and code Playground

HTML

<div class="expand">
    <img src="http://yabooks.ml/Images/The Dmon King.jpg" style="width: 100%;" />
        <h3>The Demon King</h3>
        <h5>Cinda Williams Chima</h5>
    <p> content here content here content</p>
    </div>

CSS

.expand{
        background-color: red;
        height: auto;
        padding: 5px;
        width: 18%;
        white-space: wrap;
}

JavaScript

var height = $(".expand").css('height');

$(".expand").on("mouseenter",function(){
    $(this).animate({"height":"500px"},"slow");
})

$(".expand").on("mouseleave",function(){
    $(this).animate({"height":height},"slow");
})