Перенести абсолютно позиционированные div в горизонтальное расписание

Question

Для задания компании мы с моей командой создаем внутреннее веб-приложение. Он содержит горизонтальное расписание, которое показывает события в день (см. Изображение).

Предполагаемый результат (порядок высоты не имеет значения, просто не должен перекрываться)

Создается фон (.cofano-content-timetable-body) и метки времени (.cofano-content-timetable-header), и я создал функцию, которая будет отображать события (.cofano-event) в соответствии с их временем начала и окончания.
Я хочу расширить эту функцию, чтобы она перемещала перекрывающиеся события на один уровень вниз
(например, 10: 30-12: 30 ниже 11: 00-12: 00).

Кроме того, я использую jQuery и Bootstrap. Как видите, .cofnao-event позиционируются абсолютно в .cofano-content-event-wrapper, где их положение определяется left и top. Это то, что может измениться; это казалось самым простым способом визуализации событий.

Я ищу способ (желательно только CSS) для этого. Одно из решений может заключаться в том, чтобы позволить алгоритму сравнивать время начала и окончания нового события с существующими событиями, но я рассматриваю это как решение для резервного копирования. В сети сложно найти подходящее решение, так как эта ситуация уникальна.

const __event = (id, title, time, width, top, left) => `
  <div class="cofano-event shadow-1-hover" 
       style="width: ${width + "px"}; left: ${left + "px"};  top: ${top + "px"};" 
       id="cofano-event-${id}">
    <span class="cofano-event-title" style="${width < 200 ? "min-width: 100%" : ""}">${title}</span>
    <small class="cofano-event-time">${time}</small>
  </div>
`;

function renderEvent(id, b, e, title) {

  b = moment(b, "x");
  e = moment(e, "x");
  const time = b.format("HH:mm") + " - " + e.format("HH:mm");
  const width = e.diff(b, "minutes") * W / 15;
  const left = b.diff(moment().startOf("day"), "minutes") * W / 15;

  $(".cofano-content-event-wrapper").append(__event(id, title, time, width, 15, left));

}

#cofano-event .cofano-content-timetable {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  overflow-x: scroll;
  background-color: var(--light);
}

#cofano-event .cofano-content-timetable-header {
  padding-left: 50px;
  height: 40px;
  align-items: center;
  box-shadow: 0 0 8px grey;
  display: flex;
}

#cofano-event .cofano-content-timetable-body {
  flex-grow: 1;
  display: flex;
  flex-flow: nowrap;
  position: relative;
}

#cofano-event .cofano-timetable-segment {
  border-right: 1px solid #cecece;
  height: 100%;
}

#cofano-event .cofano-timetable-segment:nth-of-type(4n + 1) {
  border-color: #868686;
  border-width: 2px;
}

#cofano-event .cofano-timetable-segment-label {
  text-align: center;
}

.cofano-content-timetable-indicator {
  position: absolute;
  border: 1px solid var(--light);
  width: 4px;
  background-color: var(--c-colour-red);
  z-index: 1;
  height: 100%;
}

.cofano-content-timetable-indicator::after {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: var(--c-colour-red);
  border-radius: 50%;
  left: -4px;
  top: -5px;
}

#cofano-event .cofano-content-timetable-details {
  flex-grow: 1;
}

#cofano-event .cofano-content-timetable-details .col {
  background-color: var(--light);
}

#cofano-event .cofano-content-event-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

#cofano-event .cofano-event {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  background-color: var(--blue);
  border-radius: 5px;
  cursor: pointer;
}

#cofano-event .cofano-event>* {
  color: white;
}

#cofano-event .cofano-event .cofano-event-title {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  white-space: nowrap;
}

#cofano-event .cofano-event .cofano-event-time {
  margin-left: 10px;
  font-size: 70%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="row no-gutters cofano-content-timetable-wrapper">
  <button class="cofano-timetable-add-button button-teal button-round shadow-1-hover">
    <span class="material-icons">add</span>
  </button>
  <div class="col shadow-1 cofano-content-timetable">
    <div class="cofano-content-timetable-header"></div>
    <div class="cofano-content-timetable-body">
      <span class="cofano-content-timetable-indicator"></span>
      <div class="cofano-content-event-wrapper"></div>
    </div>
  </div>
</div>

jsfiddle: https://jsfiddle.net/egfL4oam/

Любой пу sh дюйм правильное направление очень ценится!