JSFiddle - React, Tailwind, and code Playground

HTML

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


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

CSS

.container {
    background:#010101;
    width:150px;
    height:40px;
    font-size:11px;
    color:#fff;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}