JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  Normal paragraph text... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus.
</p>

<p class="enlarge">
  Enlarged text... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus.
</p>

<p><span class="enlarge">Why is this a lot bigger when I use "span" inside "p"? I want this to be the same size as the above text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus.</span></p>

CSS

body {
  font-size: 14px;
}

p {
  font-size: 1.4em;
}

.enlarge {
  font-size: 1.7em;
}