JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville" type="text/css" rel="stylesheet">

<div class="outerDiv">
    <div class="innerDiv" style="font-size: 68.57px; font-family: libre baskerville;">
        <span>Large Text</span>
    </div>
</div>

CSS

.outerDiv {
    line-height: 1.33;
}

span {
  overflow: hidden;
  display: block;
}

JavaScript

$('body').append('div: ' + $('.outerDiv')[0].getBoundingClientRect().height).append('<br>');
$('body').append('span: ' + $('span')[0].getBoundingClientRect().height);