JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row respect-row">
    <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>
    </div>
</div>

CSS

.respect-row {
    width: 160px;
    padding: 10px 10px 20px 10px;
    border: 1px solid black;
}
.respect-row h2 {
    margin-top: 20px;
    margin-bottom: 0;
}
.respect-row p {
    margin: 0;
}

JavaScript

var t = 700;
$(".respect-row").on('mouseenter', function () {
	var $this = $(this).data('continue', false).stop(true, true),
		$h2 = $this.find("h2").stop(true, true),//stop, in case earlier animation is still in progress.
		$p = $this.find("p").stop(true, true);//stop, in case earlier animation is still in progress.
	
	// Forward animations, each defined as a named function
	function anim1() {
		if($this.data('continue')) {
			return $h2.animate({
				'marginTop': '0px',
				'marginBottom': '20px'
			}, t).promise();
		} else {
			return $.Deferred().reject().promise();//suppress the rest of the animation chain
		}
	}
	function anim2() {
		if($this.data('continue')) {
			return $this.animate({
				'width': '320px'
			}, t).promise();
		} else {
			return $.Deferred().reject().promise();//suppress the rest of the animation chain
		}
	}
	function anim3() {
		if($this.data('continue')) {
			return $p.fadeIn(t).promise();
		} else {
			return $.Deferred().reject().promise();//suppress the rest of the animation chain
		}
	}

	//invoke forward animations
	$this.data('continue', true);
	anim1().then(anim2).then(anim3);
});
$(".respect-row").on('mouseleave', function revert() {
	var $this = $(this).data('continue', false).stop(true, true),
		$h2 = $this.find("h2").stop(true, true),//stop, in case earlier animation is still in progress.
		$p = $this.find("p").stop(true, true);//stop, in case earlier animation is still in progress.

	// Reverse animations, each defined as a named function
	function anim1() {
		if($this.data('continue')) {
			return $h2.animate({
				'marginTop': '20px',
				'marginBottom': '0px'
			}, t).promise();
		} else {
			return $.Deferred().reject().promise();//suppress the rest of the animation chain
		}
	}
	function anim2() {
		if($this.data('continue')) {
			return $this.animate({
				'width': '160px'
			}, t).promise();
		} else {
			return $.Deferred().reject().promise();//suppress the rest of the animation chain
		}
	}
	function anim3()...