I am making a simple calendar that has days as columns, and multiple events each day. This is simple. However, some events go over two days and I wonder if it is possible to display this with css only. The content will of course be dynamic, so can’t hardcode anything.

Here is the concept I’m trying to achieve:

enter image description here

The difficulty here lies in how to avoid elements overlapping, and rather push them down.

The html will look like this:

<div class="week">
  <div class="day-column">
    <div class="event">Event 1</div>
    <div class="event overnight">Event 2</div>
    <div class="event">Event 3</div>
    <div class="event">Event 4</div>
  </div>
  <div class="day-column">
    <div class="event">Event 1</div>
    <div class="event">Event 2</div>
    <div class="event overnight">Event 3</div>
    <div class="event">Event 4</div>
  </div>
  <div class="day-column">
    <div class="event">Event 1</div>
    <div class="event">Event 2</div>
    <div class="event">Event 3</div>
    <div class="event">Event 4</div>
  </div>
  <div class="day-column">
    <div class="event">Event 1</div>
    <div class="event">Event 2</div>
    <div class="event">Event 3</div>
    <div class="event overnight">Event 4</div>
  </div>
  <div class="day-column">
    <div class="event">Event 1</div>
    <div class="event">Event 2</div>
    <div class="event">Event 3</div>
    <div class="event">Event 4</div>
  </div>
</div>

Week will be a flex container, the days its children, with the events block elements.

Is this even possible to make with html and css only? Or am I doomed to make something super complicated setup where I have to make ghost objects with javascript, where events from previous day overlap only to push down overlapped events today?

Any ideas?