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();

    if($('.info').offset().top + $('.info').height() > $(this).offset().top){
      $('.info').css('top', $(this).offset().top - $('.info').height());
    }
  }).mouseleave(function(){
    $('.info').remove();
  });
});