JSFiddle - React, Tailwind, and code Playground

HTML

<div class="projects">
				<div class="display_1">
					<span class="display_1_title">Why don't get you get big? (hehe) <span class="display_1_quality">&#9733;</span></span>
				</div>
				<a class="expand"></a>
			</div>
			<div class="projects">
				<div class="display_1">
					<span class="display_1_title" id="thiisis">Why are you not like this? <span class="display_1_quality">&#9733;</span></span>
				</div>
				<a class="expand"></a>
			</div>

CSS

div.projects {
  background-color: black;
  color: #FFF;
  font-family: "Calibri";
  padding: 2%;
  cursor: default;
}

#thiisis {
  font-size: 2em;
  padding: 1%;
}

JavaScript

$(document).ready(function (){
	$("div.projects").click(function (){
    alert("pre")
		$(this).animate({"height": "140px"}, 800);
    alert("med")
		$(this).children("span.display_1_title").animate({"font-size": "2em", "padding": "1%"}, 800);
    alert("post")
	});
});