JSFiddle - React, Tailwind, and code Playground

by Manuel Souto Pico

HTML

before <span class="math-box"><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: "";
}