Clear float before a floated element

Question

I have the following example HTML:

<article>
  <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>2 Cras risus ipsum, sagittis ac viverra eget, venenatis ac nisi.</p>
  <p>3 Donec sollicitudin dolor quis dui lobortis, et pharetra lorem condimentum.</p>
  <figure><img src="https://via.placeholder.com/150x500.png?text=Image1"></img></figure>
  <p>4 Sed mauris ex, egestas in augue nec, interdum vulputate libero.</p>
  <p>5 Aliquam et gravida odio. Pellentesque luctus molestie magna, eu placerat nulla iaculis sit amet. Fusce dignissim
    porta scelerisque. Mauris tortor ante, bibendum in turpis posuere, efficitur tincidunt ante. Etiam ut lorem arcu.
    Nam eleifend rutrum orci vestibulum suscipit. Fusce eget aliquam ex, quis dapibus quam. Ut dui risus, luctus eget
    lectus nec, dignissim dapibus dolor.</p>
  <figure><img src="https://via.placeholder.com/150x500.png?text=Image2"></img></figure>
  <p>6 Nam ac elit dui. Nam id accumsan velit. Nam cursus erat euismod, pellentesque dolor sit amet, aliquam sapien.</p>
  <p>7 Cras pulvinar sapien tincidunt arcu tempus ultricies.</p>
  <p>8 Cras pulvinar sapien tincidunt arcu tempus ultricies. Sed sodales, nunc non dapibus imperdiet, diam turpis
    elementum nulla, sit amet rutrum sapien lacus a ante. Sed tellus eros, bibendum id lobortis et, ultrices et est. Sed
    non risus a augue egestas accumsan vitae et mauris.</p>
  <figure><img src="https://via.placeholder.com/150x500.png?text=Image3"></img></figure>
  <p>9 Fusce eget semper justo. Vivamus nec congue enim. Curabitur at nibh sed lectus interdum aliquet eget non felis.
    Nulla vitae tellus mollis, tempor felis in, iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et
    malesuada fames ac turpis egestas.</p>
</article>

And the accompanying CSS:

article {
  width: 300px;
  margin: 0 auto;
}

figure {
  float: left;
  clear: both;
  margin: 0 10px 10px 0;
  margin-block: 0;
  margin-inline: 0;
}

The images are all floated to the left.

This is the result:

What I'd like to achieve is to have the paragraph after the floated image to be aligned with the next paragraph that comes. So the top of Image1 needs to be aligned with paragraph 4, the top of Image2 with paragraph 6 and Image3 with paragraph 9.

So this is the desired result:

The catch is that I can only do this via CSS as I don't have control over the rendered HTML.

I figured out that if I was able to target the last paragraph before each image I could use this:

p::after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;  
}

The problem is that according to my research I cannot target that element.

I tried to do the reverse and use the ::before in the img, but that doesn't have any effect:

figure::before {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;  
}

Here's the runnable code snippet:

article {
  width: 300px;
  margin: 0 auto;
}

/* p::after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;  
} */

figure {
  float: left;
  clear: both;
  margin: 0 10px 10px 0;
  margin-block: 0;
  margin-inline: 0;
}

/* figure::before {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;  
} */

<article>
  <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>2 Cras risus ipsum, sagittis ac viverra eget, venenatis ac nisi.</p>
  <p>3 Donec sollicitudin dolor quis dui lobortis, et pharetra lorem condimentum.</p>
  <figure><img src="https://via.placeholder.com/150x500.png?text=Image1"></img></figure>
  <p>4 Sed mauris ex, egestas in augue nec, interdum vulputate libero.</p>
  <p>5 Aliquam et gravida odio. Pellentesque luctus molestie magna, eu placerat nulla iaculis sit amet. Fusce dignissim
porta scelerisque. Mauris tortor ante, bibendum in turpis posuere, efficitur tincidunt ante. Etiam ut lorem arcu.
Nam eleifend rutrum orci vestibulum suscipit. Fusce eget aliquam ex, quis dapibus quam. Ut dui risus, luctus eget
lectus nec, dignissim dapibus dolor.</p>
  <figure><img src="https://via.placeholder.com/150x500.png?text=Image2"></img></figure>
  <p>6 Nam ac elit dui. Nam id accumsan velit. Nam cursus erat euismod, pellentesque dolor sit amet, aliquam sapien.</p>
  <p>7 Cras pulvinar sapien tincidunt arcu tempus ultricies.</p>
  <p>8 Cras pulvinar sapien tincidunt arcu tempus ultricies. Sed sodales, nunc non dapibus imperdiet, diam turpis
elementum nulla, sit amet rutrum sapien lacus a ante. Sed tellus eros, bibendum id lobortis et, ultrices et est. Sed
non risus a augue egestas accumsan vitae et mauris.</p>
  <figure><img src="https://via.placeholder.com/150x500.png?text=Image3"></img></figure>
  <p>9 Fusce eget semper justo. Vivamus nec congue enim. Curabitur at nibh sed lectus interdum aliquet eget non felis.
Nulla vitae tellus mollis, tempor felis in, iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.</p>
</article>

Is there a way to do this without having to change the HTML?

Thanks for your help!