PEBA | lightweight python3 backend service to collect | REST library

The question is pretty straight-forward and I have read lots and lots of posts about the same issue, though in my specific case all these solutions are not working because I am probably handling it wrong or making it over-complicated.

Some of the solutions I tried:

• Why is this CSS nowrap not working?
• Let text go through a div
• CSS white-space nowrap not working
• Don’t wrap span elements

Most of these posts come to the conclusion that you should use inline-block in combination with white-space: nowrap. Though after numerous trial and error tries, I actually kinda forgot what I did and did not try..

My specific case

I have a React application in which I want to display an hours-bar. This bar has a (sort-of) table layout but just with 1 row. The bar consists out of 15 cells (div's).

The problem

Each cell should have a specific text above it when a certain condition is met. So for example, I want to show a text value on the starting cell div, and the ending cell div and then each 5th cell again. It should look something like this:

I figured I could achieve this by making a 'Time' row inside the body of the time bar, however when I add it as a separate row, then the times / text will never be above the correct cells when the bar has multiple lines on the screen, you would then get something like this:

So my next idea was to make 2 separate div's inside the row where 1 div (the top div) functions as the header and the second div functions as the actual bar: