I'm trying to have an image on the left of some text, then another paragraph with the image on the right of the text blow it. But when I try to use inline-blocks or similar I end up with this: https://i.stack.imgur.com/KVwK9.jpg I want there to be a separation between the paragraphs. All the answers I found are pre-flex and also don't work.
This is my code, that I copy pasted from some tutorial website.
<div class="section">
<img align="left" src="images/placeholder.png"/>
<p>Lorem ipsum</p>
</div>
<div class="section">
<img align="right" src="images/placeholder.png"/>
<p>Lorem ipsum</p>
</div>
.section img p {
display: flex;
flex-flow: row wrap;
align-items: center;
}