Excalidraw text wrapping

What I’m trying to do

I am trying to add text wrap around excalidraw image, technically excalidraw group embeds, so that it can be placed without occupying space on either left or right side of the page.

Things I have tried

I made a snippet that does the work somehow

.internal-embed,
.block-language-excalidraw {
    max-width: 100% !important;
    height: auto !important;
    clear: both !important;
}

/* Left-aligned Excalidraw embeds */
.internal-embed[src*="left"],
.block-language-excalidraw[src*="left"],
.internal-embed[alt*="left"],
.block-language-excalidraw[alt*="left"] {
    float: left !important;
    margin-right: 1em !important;
    margin-bottom: 1em !important;
}

/* Right-aligned Excalidraw embeds */
.internal-embed[src*="right"],
.block-language-excalidraw[src*="right"],
.internal-embed[alt*="right"],
.block-language-excalidraw[alt*="right"] {
    float: right !important;
    margin-left: 1em !important;
    margin-bottom: 1em !important;
}

However this only works in live preview mode i.e. while editing and not during preview mode.
Editing mode:


Preview mode:

Can someone help me with the snippet?