JSFiddle - React, Tailwind, and code Playground

by Fred Loney

HTML

Before
<span class="distorted-over-under">
  <span class="over">sup</span>
  <span class="under">sub</span>
</span>
After

CSS

body {
    font-family: monospace;
}
span.distorted-over-under > .over {
    position: relative;
    top: -0.5em;
}
span.distorted-over-under > .under {
    position: relative;
    top: 0.5em;
    left: -2.3em; /* This will vary with font... */
}