JSFiddle - React, Tailwind, and code Playground

HTML

<h2>With flexbox</h2>

<div id="tooltipDesc">
  <span id="longDesc">Lorem ipsum</span>
</div>

<h2>With absolute positioning</h2>

<div id="tooltipDesc2">
  <span id="longDesc2">Lorem ipsum</span>
</div>

CSS

#tooltipDesc{
 position: relative;
 width: 300px;
 height: 80px;
 background-color: rgb(255, 255, 255);
 color: #6c6c6c;
 border: 1px black solid;
 display: flex;
 justify-content: center;
 align-items: center;
}

#longDesc{
  color: #6c6c6c;
}

#tooltipDesc2{
 position: relative;
 width: 300px;
 height: 80px;
 background-color: rgb(255, 255, 255);
 color: #6c6c6c;
 border: 1px black solid;
}

#longDesc2{
  color: #6c6c6c;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}