Float image to bottom around text

I want to float (wrap) text around image set to bottom left/right. Here is example of what I am trying to achieve. However if I set div block to flex as per code the float stops working. Any ideas how to achieve this?

Example:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I figured out a solution on my own. I used code snippet below. Uploaded image to webflow to use as shape for text to wrap. Named the div to swotimage# and applied code, padding and margins for each one. Since I have each in each corner I had to adjust padding and margins for each, and then again for device screen sizes.

The results

The code

<style>
.swotimage1 {
	float:  right;
	shape-outside:  url(https://uploads-ssl.webflow.com/62a0fa4c930bd133d5a9fd99/62c8e99dbf7adc073e11cd39_1S.png);
	shape-margin: 3px;
}

.swotimage2 {
	float:  left;
	shape-outside:  url(https://uploads-ssl.webflow.com/62a0fa4c930bd133d5a9fd99/62c8e6c8903d342636fd85a6_W.png);
	shape-margin: 3px;
}

.swotimage3 {
	float:  right;
	shape-outside:  url(https://uploads-ssl.webflow.com/62a0fa4c930bd133d5a9fd99/62c8e99db362d15a1cf6fab4_3O.png);
	shape-margin: 3px;
}

.swotimage4 {
	float:  left;
	shape-outside:  url(https://uploads-ssl.webflow.com/62a0fa4c930bd133d5a9fd99/62c8e99d38027f580dfc89a1_4T.png);
	shape-margin: 3px;
}

</style>

The adjustments in webflow

What it looked like in webflow before publishing

Hi! Are “.swotimage…” image elements or is that the name of your paragraph element? I’m just wondering what you’re assigning “shape-outside” to(?). Thanks!