JSFiddle - React, Tailwind, and code Playground

HTML

<span class="base">
    <span class="outer"><span class="inner">x</span></span>
</span>
<span class="base">
    <span class="outer"><span class="inner">x</span><span class="fix"></span></span>
</span>
<span class="base">
    <span class="outer"><span class="inner">x</span></span>f
</span>

CSS

.base {
    display: inline-block;
    margin-right: 1em;
}

.outer {
    position: relative;
}

.fix {
    display: inline-block;
}

.inner {
    position: absolute;
}