How to separate items in a margin column

[Sytse45]

Description

Two items in the margin column are overlapping. How can I separate them?
The first item is an example ( {#exm-example .aside} ) and the second is a callout note ( {.callout-note .aside} ).
Complete minimal example:

---
title: "Overlapping"
format:
  html:
    grid:
      body-width: 600px
      margin-width: 400px
---

# Example and callout-note

::: {#exm-example .aside}
  \
This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. 
:::

::: {.callout-note .aside}
This is a callout-note
::: 

My quarto version is 1.4.525.
My OS is Debian.

[mcanouil]

I suggest you enclose everything in a aside div.

---
title: "Quarto Playground"
format: html
---

# Example and callout-note

:::: {.aside}
::: {#exm-example}
This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example. This is an example.
:::

::: {.callout-note}
This is a callout-note
::: 
::::

[mcanouil]

FYI, I opened an issue to improved this:

• Overlapping elements in margins (callout/example floats) #8078