JSFiddle - React, Tailwind, and code Playground

HTML

<h2><span class="inline-block">optatur, volendit inum simolor</span></h2>

<h2><span class="inline">optatur, volendit inum simolor</span></h2>

CSS

h2 {
    width:200px;
    text-align:center;
}

h2 span {
    border-bottom:3px solid black;
    width:100%;
}

h2 span.inline-block {
    display:inline-block;
}

h2 span.inline {
    display:inline;
}

JavaScript

/* the ideal version is a combination of the two;
the text-hugging width of the second version *and* the single underline of the first version.
*/