I am building a resource/scheduling calendar app in react. I built it using an HTML table. The table is the grid for the calendar. Within the table cells, I have event divs that can be longer than the cell itself to represent the length of the event. Because of this, the events are overflowing the parent cell which works well. However if two events overlap each other on the same row, id like the divs to stack even if the divs are not within the same cell. Here is an example.

You can see in the image that the green and blue divs overlap but since they are in 2 different cells, they do not stack, they just overlap each other. Here is some example code:

<table>
  <tbody>
    <tr>
      <td>
        <CalendarEvent style={{width: "widthOfTwoCells"}} /> 
      </td>
      // This first div will overlap the 2nd 
      // since the width is as long as 2 cells. 
      <td>
        <CalendarEvent style={{width: "widthOfTwoCells"}} />
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

This is pretty basic compared to whats there but I think it gets the issue across. Hoping there is a way to fix this with pure css or something without haviing to build a formula in JS that checks if they are colliding. Thanks for taking a look. Here is some extra CSS for the Cal Event div incase that helps.

.calendar-event {
  position: relative;
  height: 40px;
  z-index: 90;
  
}