JSFiddle - React, Tailwind, and code Playground

by spicyj

HTML

<div id="mathmathmath">
tugboat-fraction-
<span class="mfrac">
<span class="mfracnum"><img src="http://www.wizardofdraws.com/images/tug.gif"/></span>
<span class="mfracmid"><span></span></span>
<span class="mfracden"><img src="http://www.wizardofdraws.com/images/tug.gif" height="80"/></span>
</span>
</div>

CSS

.mfrac {
    display: inline-table;
    vertical-align: 0.5em;
}

.mfracnum, .mfracmid, .mfracden {
    display: table-row;
    text-align: center;
}

.mfracmid > span {
    background: black;
    display: block;
    height: 0.05em;
    min-height: 1px;
}

JavaScript

var mmm = document.getElementById("mathmathmath");
var q = [mmm];
while (q.length) {
    var n = q.shift();
    if (n.nodeType === 1) {
        q.push.apply(q, n.childNodes);
    } else if (n.nodeType === 3) {
        n.textContent = n.textContent.replace(/[ \n]+/g, "");
    }
}