JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">A single line</div>
<div class="block">Two distinctively different lines</div>
<div class="block">A somewhat egregious demonstrative amount of text</div>

CSS

.block {
    display: inline-block;
    vertical-align: top;
    /* max-width: 140px; */
    background-color: lightgrey;
    text-align: center;
    
    /* new */
    width: min-content;
    padding: 0 5px; 
}