JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<br><br>
<div class="subject">
	<div class="hoverinfo" data-info="The text from subject 1 - OK!">show info(hover it)</div>
	<span>subject 1</span>
</div>
<div class="subject">
	<div class="hoverinfo" data-info="There is more text inside and this is a problem because text expand div to the bottom - PROBLEM!">show info(HOVER IT)</div>
	<span>subject 2 - here is a problem</span>
</div>
<div class="subject">
	<div class="hoverinfo" data-info="The text from subject 3 - OK">show info (hover it)</div>
	<span>subject 3</span>
</div>

CSS

.subject{
	width:400px;
	height:100px;
	background:lightblue;
}
.subject:nth-of-type(2){
  background:lightgrey;
}
.subject:nth-of-type(3){
  background:lightgreen;
}
.info {
	position:absolute;
	color:black;
	width: 200px;
	background-color:lightcyan;
	border: solid 2px black;
	text-align: center;
	margin-top: -30px;
	display: none;
}
.hoverinfo {
	background:pink;
	float:right;
}

JavaScript

$(function(){
	$('.hoverinfo').mouseover(function(){
		$(this).prepend('<div class="info"></div>');
		$('.info').html($(this).attr("data-info"));
		$('.info').fadeIn();
	}).mouseleave(function(){
		$('.info').remove();
	});
});