JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Playing with ems. See http://www.w3.org/WAI/GL/css2em.htm -->

<div class='container'>
  <!-- for reference. 1em == width of a M -->
  <div class='box'>
    <div class='box'>
      <div class='box'>
        <div class='box'>
        </div>
      </div>
    </div>
  </div>

  <!-- ems are not recursive by default, see CSS -->
  <div class='box smaller'>
    <div class='box smaller'>
      <div class='box smaller'>
        <div class='box smaller'>
        </div>
      </div>
    </div>
  </div>

  <!-- change default browser font size, see second and third inner boxes unaffected -->
  <div class='box smaller'>
    <div class='box dpi'>
      <!-- notice recursiveness here -->
      <div class='box smaller'>
        <div class='box smaller'>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.smaller {
    font-size: 0.5em;
}

.dpi {
    font-size: 20pt;
}

.pixel {
    font-size: 20px;
}

.box {
    padding: 1em;
    margin: 1em;
    border: 1px solid black;
}

/* does NOT simulate browser's default font size, uncomment to make  second case recursive */
.container {
    /* font-size: 16pt; */
}

JavaScript

// jQuery FAIL?
$.fn.prependText = function(text) {
    this.each(function() {
        var textNode = document.createTextNode(text);
        $(this).prepend(textNode);
    });
};

// foo with a M, since ems are an M width
$('.box').prependText('Moo');