How can i display elements?

Question

I have an object with arrays, which include timeStart and timeEnd. ex.

{
  0: ['timeStart' => '17:30', 'timeEnd' => '18:20'],
  1: ['timeStart' => '17:45', 'timeEnd' => '19:20'],
  2: ['timeStart' => '18:30', 'timeEnd' => '20:00']
  ...
}

I need display all of this in a column like this:

example

I tried to check for crossing and add marginLeft for each cross, but it displaying in a line

UPD:

Actually, i think this is so bad solution option

setEvent(event, index) {

  let prevDate
  let prevMargin
  let prevHeight
  if(index < this.installersWorkSchedule.events.length && index > -1) {
    if (index > 0) {
      let prevEvent = this.installersWorkSchedule.events[index - 1]
      prevDate = prevEvent.date

      prevMargin = moment.duration(prevEvent.timeStart).asMinutes() - 480
      prevHeight = moment.duration(prevEvent.timeEnd).asMinutes() - moment.duration(prevEvent.timeStart).asMinutes()

    }

    const margin = event.date === prevDate ?
        -(parseInt(prevMargin) + parseInt(prevHeight)) + (moment.duration(event.timeStart).asMinutes() - 480)
        :
        moment.duration(event.timeStart).asMinutes() - 480
    const height = moment.duration(event.timeEnd).asMinutes() - moment.duration(event.timeStart).asMinutes()
    let marginLeft = 0
    for (let ev of this.installersWorkSchedule.events) {
      if (ev !== event) {
        let currentMargin = moment.duration(ev.timeStart).asMinutes() - 480
        let currentHeight = moment.duration(ev.timeEnd).asMinutes() - moment.duration(ev.timeStart).asMinutes()
        let checkMargin = event.date === ev.date ?
            -(currentMargin + currentHeight) + (moment.duration(event.timeStart).asMinutes() - 480)
            :
            moment.duration(event.timeStart).asMinutes() - 480
        if (checkMargin < 0) {
          marginLeft += 70

        }
      } else {
        break
      }
    }

    return [margin + 'px', height + 'px', marginLeft + 'px']
  }

  return ['0', '0', '0']

},

__

<template v-for="(event, index) in installersWorkSchedule.events">

              <div
                  @click="goTo(event.orderId)"
                  :id="index"
                  class="rounded text-left text-sm  p-1 font-bold justify-start cursor-pointer transform transition duration-500 hover:scale-110 hover:z-50"
                  v-if="event.date === formattedDate(day)"
                  :style="{
                    marginTop: setEvent(event, index)[0],
                    height: setEvent(event, index)[1],
                    marginLeft:  setEvent(event, index)[2]

                  }"
              >
              </div>
            </template>