JSFiddle - React, Tailwind, and code Playground
HTML
<span class="fraction">1/2</span>
<span class="fraction">3/4</span>
<span class="fraction">1/32</span>
<span class="fraction">77/102</span>
CSS
.fraction, .top, .bottom {
padding: 0 5px;
}
.fraction {
display: inline-block;
text-align: center;
}
.bottom{
border-top: 1px solid #000;
display: block;
}
JavaScript
$('.fraction').each(function(key, value) {
$this = $(this)
var split = $this.html().split("/")
if( split.length == 2 ){
$this.html('<span class="top">'+split[0]+'</span><span class="bottom">'+split[1]+'</span>')
}
});