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}

JavaScript

$(document).ready(function() {
       
		$(".respect-row").mouseover(function(){
			// $(this).removeClass("col-xs-6");
		    // $(this).addclass("col-xs-12");
			$(this).find("h2").animate({
		        'marginTop' : "-=40px"
		    },100);
		    $(this).find("p").show(function(){
		   		 $(this).find("p").animate({
		         '	marginTop' : "-=40px"
		    	 },100);
		     });
		    //$(this).find(".col-xs-6").css("width","320");

		    $(this).animate({ "left": "+=320px" }, "slow" );

		});
		$(".respect-row").mouseout(function(){
			$(this).find("h2").animate({
		        'marginTop' : "+=40px"
		    });
		   $(this).find("p").hide();
			$(this).css("width","160");
		});
   });