JSFiddle - React, Tailwind, and code Playground

HTML

This text is short length, it is shown in the middle
<div class="container">
<span class="text">Lorem ipsum dolor sit amet</span></div>


and when the text length is long, I want everything to be displayed in the middle
<div class="container">
<div class="_text">Lorem ipsum dolor sit amet, ipsum loroes eheu 
    
    </div></div>

CSS

.text{
position:absolute;
left:25px;
top:13px;
    width:120px;    
   font-size:11px;
color:#fff;
    
}
._text{
font-size:11px;
color:#fff;
    
    
}
.container {
    position:relative;

background:#010101;
    width:150px;
    height:40px;
display:table-cell;
    vertical-align:middle;
    text-align:center;
}