JSFiddle - React, Tailwind, and code Playground

HTML

<p>очень длинный заголовок, который не помещается в одну строку<p>
    
<p>очень длинный заголовок,</br> который не помещается в одну строку<p>

CSS

p {
    width: 500px;
    height: 40px;
    text-transform: uppercase;
    font-size: 14pt;
    text-align: center;
}

JavaScript

Вопрос на засыпку, подскажите, как можно свойствами сделать так, чтобы первый заголовок выглядел похожим на второй, т.е. верхняя строка уже, нижняя шире? Иными словами, строки должны идт на возрастание.