JSFiddle - React, Tailwind, and code Playground

HTML

<p class="basesize">Default font size: </p>
<p class="fonttest">default: <span class="default">lorem ipsum dolor</span></p>
<p style="font-size: 120%">large: <span class="default">lorem ipsum dolor</span></p>
<p style="font-size: 144%">x-large: <span class="default">lorem ipsum dolor</span></p>
<p class="fonttest">medium: <span class="medium">lorem ipsum dolor</span></p>
<p class="fonttest">100%: <span class="mediumperc">lorem ipsum dolor</span></p>
<p class="fonttest">small: <span class="small">lorem ipsum dolor</span></p>
<p class="fonttest">66%: <span class="smallperc">lorem ipsum dolor</span></p>
<p class="fonttest">large: <span class="large">lorem ipsum dolor</span></p>
<p class="fonttest">133%: <span class="largeperc">lorem ipsum dolor</span></p>

CSS

p {padding: 10px;}
p span {display: block; float: right;}
.basesize  {font-weight: bold;}
.medium    {font-size: medium;}
.mediumperc{font-size: 100%;}
.small     {font-size: small;}
.smallperc {font-size: 66%;}
.large     {font-size: large;}
.largeperc {font-size: 133%;}

JavaScript

// Get default font size
var defaultSize = parseFloat($('.default').css('font-size').replace('px',''));

// Write default font size
$('.basesize').append(defaultSize + 'px');

// For each test font size, write the font sizes to the page
$('.fonttest').each(
    function() {
        var fontsize = parseFloat($(this).find('span').css('font-size').replace('px',''));
        $(this).append('<br/>Font size: ' + fontsize + 'px');
        $(this).append('<br/>Percentage: ' + fontsize/defaultSize*100 + '%');
    }
);