How to fix the size of a div at different times in a time schedule?

Question

css

I have such a problem that I don’t understand how to make a div block of different lengths so that it takes into account the startTime and endTime times and makes height different lengths. Now they are all fixed length, it's just not clear how this is implemented in react, let's say?
There is an idea of ​​course to do style height and calculate the width height. Then take the time difference let's say 60 minutes /15 = 4 and 4*per height let's say it's 50 fixed for each line. And we get for example 200 px height. Or somehow everything should be different and the implementation can be simple?
Here is my module source code
https://codepen.io/rusline/pen/NyBYVY?editors=0010

Answer 1

There is an idea of ​​course to do style height and calculate the width height. Then take the time difference let's say 60 minutes /15 = 4 and 4*per height let's say it's 50 fixed for each line. And we get for example 200 px height. Or somehow everything should be different and the implementation can be simple?

Well, this is the simple implementation. For everything about everything - a few lines .
Or, if it is assumed that the intervals are always a multiple of 15 minutes, you can prepare several classes that will set the height and dynamically assign one of them - also nothing complicated .