JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<pre id="example">Lorem ipsum</pre>
<pre id="out"></pre>

CSS

#example {
  display: inline-block;
  font-size: 1em;
  margin: 1em;
  padding: 0;
}

JavaScript

const { width, height } = example.getBoundingClientRect()
const oneEm = parseFloat(getComputedStyle(example).fontSize);

const f = num => num.toFixed(1);

out.textContent = `
width: ${width}px ${f(width / oneEm)}em
height: ${height}px ${f(height / oneEm)}em

width per char: ${f(width / example.textContent.length)}px ${f(width / example.textContent.length / oneEm)}em
`