JSFiddle - React, Tailwind, and code Playground

HTML

<p>
In the first group there is a (slight) space after the 2nd line,
and in the second group there is extra space before the 2nd line.<br>
In the first case this is due to a pronounced descender value of Segoe Script, and in the second it is because of the larger font-size.<br>
<br>
My questions are:<br>
</p>
<ol>
  <li>How is that layout/spacing/line-gap(top and bottom) calculated relative to font metrics (OS/2 or Typo Ascender/Descender) and html metrics? What is the logic/algorithm?</li>
  <li>If it's purely a larger line-box due to the different characters, why does the second one not also have spacing below the differing line?</li>
</ol>
<p style="line-height:12pt;font-family:Verdana;font-size:16pt;">
line-height:12pt / font-size:16pt<br><br>
Testing Testing Testing<br/>
Testing Testing <span style="font-family:'Segoe Script';">Testing Segoe Script</span><br/>
Testing Testing Testing<br/>
</p>
<br>
<p style="line-height:12pt;font-family:Verdana;font-size:12pt;">
line-height:12pt / font-size:12pt<br><br>
Testing Testing Testing<br/>
Testing Testing <span style="font-size:20pt;">Testing font-size:20pt</span><br/>
Testing Testing Testing<br/>
</p>

CSS

body {font-family:sans-serif;}