JSFiddle - React, Tailwind, and code Playground

HTML

<div id="expand">
        <img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png">
        <h3>The Demon King</h3>
        <h5>Cinda Williams Chima</h5>
        <p>jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'</p>
    </div>

CSS

.expand{
        background-color: red;
        padding: 5px;
        width: 18%;
    }

JavaScript

var expanded = "2000px";
var contracted = "auto";

var time = 2000;

$("#expand").mouseover(function(){
  $( "#expand" ).animate({
    height: expanded
  }, time);
});

$("#expand").mouseout(function(){
  $( "#expand" ).animate({
    height: contracted
  }, time);
});