JSFiddle - React, Tailwind, and code Playground

HTML

<div class ="row respect-row" style="border:1px solid black;">
				<div class="col-xs-6 myclass1">
					<h2 id ="respect-hover">RESPECT</h2>
					<p style="display:none"> &#8221;Respect yourself and others will<br> respect you.&#8221; &#8212; Confucius</p>

CSS

.respect-row{ width:160px;height:200px}
.respect-row h2{ padding-top:100px}

JavaScript

$(document).ready(function() {
       
		$(".respect-row").mouseenter(function(){
		
			$(this).find("h2").stop(true, true).animate({
		       'marginTop' : "-=80px"
		    },200);

		    $(this).stop(true, false).animate({ width: "320px" });
		    //$(this).find("p").show();
		    $(this).find("p").fadeIn( 1000 );
		});
		$(".respect-row").mouseleave(function(){
			$(this).find("h2").stop(true, true).animate({
		        'marginTop' : "+=80px"
		    },200);
		    $(this).stop(true, false).animate({ width: "160px" });
		    $(this).find("p").hide();
		});
   });