JSFiddle - React, Tailwind, and code Playground

HTML

Test

<p>
    Set to 16px<br />
    <span>Child of p, inherits size from p, 0.5 x 16 = 8px</span>
</p>

<span>Child of body, inherits size from body, 0.5 x 32 = 16px</span>

<div>
    Inherits font size from body.
    <span>Inherits font size from div, which in turn is inheriting from body.</span>
</div>

CSS

body {
    font-size: 32px;
}

p {
    border: 1px solid black;
    font-size: 16px;
    padding: 5px;
    width: 10em;
}

span {
    border: 1px solid red;
    display: inline-block;
    font-size: 0.5em;
    width: 10em;
}