JSFiddle - React, Tailwind, and code Playground

by Jan Marthedal Rasmussen

HTML

before<span class="math-box" style="border: 1px solid red;"><span class="strut" style="height: 2.008em; vertical-align: -0.686em;"></span><span class="vstack"><div style="top: 0.686em;">8</div><div style="top: -0.23em;"><span class="frac-line"></span></div><div style="top: -0.677em;">1234</div><span class="baseline-fix"></span></span></span>after

CSS

.math-box {
  display: inline-block;
}
.math-box .vstack {
  display: inline-block;
  position: relative;
}
.math-box .vstack > div {
  position: relative;
  text-align: center;
  height: 0;
}
.math-box .baseline-fix {
  display: inline-table;
  table-layout: fixed;
}
.math-box .frac-line {
  width: 100%;
  display: inline-block;
}
.math-box .frac-line:before {
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  content: "";
}
.math-box .frac-line:after {
  display: block;
  margin-top: -1px;
  border-bottom-style: solid;
  border-bottom-width: 0.04em;
  content: "";
}
.math-box .strut {
  display: inline-block; 
}