JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="number">33</div>
<p class="text">Всякийразный текст</p>
</div>

<div class="wrapper">
<div class="number">100 500</div>
<p class="text">Еще более всякийразный текст, ну правда</p>
</div>

<div class="wrapper">
<div class="number">-1</div>
<p class="text">Просто текст</p>
</div>

CSS

.wrapper {
    font-size: 14px;
    position: relative;
    display: inline-table;
    width: 1px; /* грязный-грязный хак */
}

.number {
    font-size: 60px;
    display: table-row;
    white-space: nowrap;
}

.text {
    display: table;
    table-layout: fixed;    
    width: 100%;
    word-wrap: break-word;
    text-align: left;
}


body {
    text-align: justify;
}
body:after {
    content: '';
    display: inline-block;
    width: 100%;
}