JSFiddle - React, Tailwind, and code Playground

HTML

<div id="em">
    <h1>Длинный и большой заголовок, который будет иметь меньшую высоту строки, чем нужно</h1>
    <p>Тем не менее, праздник сохранял своё значение, выпускались праздничные открытки и звучали поздравления в адрес фронтовиков.</p>
    <p>Впервые широко был отпразднован в СССР лишь спустя два десятилетия при Брежневе. В том же юбилейном 1965 году День Победы снова стал нерабочим.</p>
</div>

<div id="em2">
    <h1>Длинный и большой заголовок, для которого высота строки прописана еще раз</h1>
    <p>Тем не менее, праздник сохранял своё значение, выпускались праздничные открытки и звучали поздравления в адрес фронтовиков.</p>
    <p>Впервые широко был отпразднован в СССР лишь спустя два десятилетия при Брежневе. В том же юбилейном 1965 году День Победы снова стал нерабочим.</p>
</div>

<div id="dimensionless">
    <h1>Длинный и большой заголовок, для которого высота строки не задана, тем не менее он смотрится отлично</h1>
    <p>Тем не менее, праздник сохранял своё значение, выпускались праздничные открытки и звучали поздравления в адрес фронтовиков.</p>
    <p>Впервые широко был отпразднован в СССР лишь спустя два десятилетия при Брежневе. В том же юбилейном 1965 году День Победы снова стал нерабочим.</p>
</div>

CSS

div {
    margin: 3em 0;
}

h1 {
    font-size: 2em;
}
h1, p {
    margin: 1em 0 .5em;
}

#em {
    line-height: 1.2em;
}
#em2,
#em2 h1 {
    line-height: 1.2em;
}

#dimensionless {
    line-height: 1.2;
}