JSFiddle - React, Tailwind, and code Playground

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: -1cm;
    left: -2.3em;
}
span.distorted-over-under > .under {
    position: relative;
    top: 1em;
    left: -4.6em; /* This will vary with font... */
}