JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="line-height-only">THIS IS MY ELEMENT<br />THIS IS MY ELEMENT</h1>
<h1 class="line-height-margins">THIS IS MY ELEMENT<br />THIS IS MY ELEMENT</h1>
<h1 class="line-height-pos">THIS IS MY ELEMENT<br />THIS IS MY ELEMENT</h1>

CSS

h1 {
    float: left;
    width: 200px;
    font-size: 20px;
}
h1.line-height-only {
    margin-top: 0;
    background: blue;
    line-height: 50px;
}
h1.line-height-margins{
    background: red;
    line-height: 62px;
    margin-top: -24px;
}

h1.line-height-pos{
    background: green;
    line-height: 62px;
    position: relative;
    top: -24px;
}