JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"><p class="increased">
    <span class="line">This is a really long line that will wrap inside this particular div a couple of times to demonstrate "uneven" line spacing.</span>
    </p></div>

<div class="container"><p class="increased">
    <span class="line">This is a short line with extra line height.</span></p>
</div>

<div class="container"><p class="increased">
    <span class="line">This is a short normal line.</span></p>
</div>

CSS

div
{
    background-color: #CCC;
    width: 300px;
}
.container {
    border:1px solid black;
    margin:0px;
    padding:0px;
    margin-bottom:5px;
}
.increased
{
    margin-top:-1.4em;
    margin-bottom:-1.4em;
    padding:0px;
}

.line
{
         line-height: 4em;
    background-color: #FFC;
}

.increased:first-line
{
    color:blue;
    line-height:normal;
}