<body>
  <div class='em-parent'>
    <div class='em-child'>
      <h1>em</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque laboriosam suscipit sed corporis in fugiat at amet distinctio? Earum placeat, alias est assumenda repellendus ipsam non eum. Nobis, consectetur corporis.</p>
    </div>
  </div>
  <div class='rem-parent'>
    <div class='rem-child'>
      <h1>rem</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque laboriosam suscipit sed corporis in fugiat at amet distinctio? Earum placeat, alias est assumenda repellendus ipsam non eum. Nobis, consectetur corporis.</p>
    </div>
  </div>
</body>
body {
  display: flex;
  text-align: center;
}
.em-parent {
  font-size: 30px;
}
.em-child {
  font-size: 1em;
}
.rem-parent {
  font-size: 30px;
}
.rem-child {
  font-size: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.