JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
	<div class="person">
		<span  class="short-name">WISH</span>
		<div  style="display:none;" class="more">
			<span>William</span>
			<span>Shakespeare</span>			
		</div>
	</div>

    <div class="person">
		<span  class="short-name">AGCH</span>
		<div  style="display:none;" class="more">
			<span>Agatha</span>
			<span>Christie</span>			
		</div>
	</div>

    <div class="person">
		<span  class="short-name">JALO</span>
		<div  style="display:none;" class="more">
			<span>Jack</span>
			<span>London</span>			
		</div>
	</div>
    
</div>

CSS

#main {
  position: relative;
  border: 1px solid;
  width: 150px;
  height: 100px;
}

.person {
    float:left;
    border:1px solid;
    margin:1px 2px;;
}

.person:hover>.more {
    display: block !important;
}

.more {
    z-index:1;
    position:absolute;
    white-space: nowrap;
    background-color:gray;
}