Seskládání překrývajících se DIVů

Ahojte, už delší dobu bojuji s úpravou DIVů tak, aby se mi seskládali pod sebe, pokud se překrývají. jedná se o stránku, kde se vytváří rozvrh hodin/lekcí. Pokud se vytvoří lekce, které se v rámci 1 času překrývají, tak vždy ta následující překryje tu předchozí a jsou v 1 lajně. Nedaří se mi tyto divy "rozházet" do 2 řádků (případně 3 atd dle počtu překrývajících se lekcí v rámci 1 času). Má to být v principu jako Masonry orientované horizontálně (vizte příloha). Věděl by někdo, jak to nastylovat? Aktuálně používam pro ohraničující divy v css display: table-cell. Odkaz na stránku zde

Díky předem za případné reakce.

Chápu to dobře, že místo překrývání se druhá akce má být v jednom řádku tabulky pod tou první?
Co je to za komponentu?

Ano, v jednom "řádku" pod tou první (respektive předchozí, pokud je již v daný čas nějaká vytvořena). Je to nová komponenta, není nikde zveřejněná. Jedná se o to, aby když třeba v čase 8:00 - 9:00 je již napozicován první div, pokud je vytvořen další div v čase 8:30 - 9:30, aby ten druhý šel pod a nezakrýval ten předchozí. Stejně tak, pokud by byla 2 divy ve stejný čas (pozici). Existuje pro to vůbec nějaká úprava?

Ptal jsem se co je to za komponentu.
Pomocí CSS to asi takhle udělat nepůjde, bude se to muset udělat pomocí javascript.

Komponenta nemá název. Je to komponenta pro vytváření rezervací pro tělocvičnu, která se teď udělala a nyní přicházím na problém s překrýváním.

Bez JS to asi opravdu nepůjde. Týdenní zobrazení se navíc obvykle dělá na výšku.
Co použít nějaké hotové řešení - třeba FullCalendar ?

Ok, díky za názory. Měl by někdo zájem za úplatu daný problém vyřešit?

já bych doporučil to asi opravdu řešit nějakou hotovou komponentou

Bohužel jsem žádnou vyhovující, která by uměla spravovat lekce i registrace/přihlášení na ně, nenašel.

má tam být integrována i platba nebo ne?