How to display “Classic” built-up fractions with an horizontal line in CSS / JavaScript?

Question

I have a fraction and I want to display it neatly and nicely.

For example

4/5

would be

4
-
5

I have looked at this and

Answer 1

I found this useful to me

As I needed to have the line up when denominator was longer and down when numerator was longer, I changed some code above (johnatan lin) like this. When you have a longer numerator use the class numerator for the numerator and no classes for denoninator when you have longer denominator, do not use classes for the numerator and use the class denominator for the denominator.

The css style

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}
.denominator {
  border-top: 2px solid grey;
}

The html code example

Ricavi Numero di coperti

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}
.denominator {
  border-top: 2px solid grey;
}

A way to show fractions (not only numers)
This is what I did after different solutions found on stackoverflow.

This is with longer numerator

  
Longer than the other one
  
Numero di coperti



This is longer denominator

  
Ricavi
  
Numero di coperti

Hello from Giovanni

A way to shorten this stuff

To make thing go faster I put this javascript (into the body among tags or on another js file with ).

function numeratore(num, den){
    document.write("
" + num + "
" + den + "
")
}

function denominatore(num, den){
    document.write("
" + num + "
" + den + "
")
}

and this into the html body

denominatore: when the denominator is longer numeratore: when the numerator is longer

and the css, like before

This goes into the tags or into the

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}
.denominator {
  border-top: 2px solid grey;
}