Your image needs to float so the text and can wrap around, we are all telling you this.
If the text has to wrap around a non-rectangular shape, shape-outside
can be used too .
The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
Example with a rounded image
div.image img {
float: left;
border-radius: 50%;
shape-outside: ellipse(160px 100px);
border:solid;
}
h3,p {margin:0;}
<section>
<h2>Title here</h2>
<article>
<div class="image">
<img alt=" title" src="http://dummyimage.com/300x200/e3de88&text=shape-outside">
</div>
<h3> text that needs to be wrapped here</h3>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
</article>
</section>
Here is some other example where the text can be layed inside fancy & complexe shapes: https://css-challenges.com/custom-text-shape/ & the pen that goes along https://codepen.io/t_afif/pen/eYpeOXB