How can I get these images not overlap?

Note how the two images in the blog posts below overlap, What I want is that the height of the whole blog post determined by the height of the text and the height of the image, whichever is more.

Here is the html that my system currently is generating. I have some control over it and also over the css. But I am not sure how to get what I want.

<article class="md-post md-post--excerpt">
  <header class="md-post__header">
    
    <div class="md-post__meta md-meta">
      <ul class="md-meta__list">
        <li class="md-meta__item">
          <time datetime="2024-01-23 00:00:00">January 23, 2024</time></li>
        
        
          
          <li class="md-meta__item">
            
              1 min read
            
          </li>
        
      </ul>
      
    </div>
  </header>
  <div class="md-post__content md-typeset">
    <h2 id="servoeasingexamples-at-master-arminjoservoeasing"><a class="toclink" href="2024/01/23/servoeasingexamples-at-master--arminjoservoeasing/">ServoEasing/examples at master · ArminJo/ServoEasing</a></h2>
<p><img class="cover" src="https://camo.githubusercontent.com/e1ef951613bb96909e87ae7c06207aec7aa3b42a60e460362b9e44812161cf9c/68747470733a2f2f692e7974696d672e636f6d2f76692f6643397578644f426866412f687164656661756c742e6a7067" width="300"></p>
<p>Sophisticated (too?) package for servo easing in all possible permutations!
* <strong>Link to site:</strong> <strong><a href="https://github.com/ArminJo/ServoEasing/tree/master/examples#servoeasing-examples">ServoEasing/examples at master · ArminJo/ServoEasing</a></strong></p>
    <nav class="md-post__action">
      <a href="2024/01/23/servoeasingexamples-at-master--arminjoservoeasing/">
        Continue reading
      </a>
    </nav>
  </div>
</article>
<article class="md-post md-post--excerpt">
  <header class="md-post__header">
    
    <div class="md-post__meta md-meta">
      <ul class="md-meta__list">
        <li class="md-meta__item">
          <time datetime="2024-01-23 00:00:00">January 23, 2024</time></li>
        
        
          
          <li class="md-meta__item">
            
              1 min read
            
          </li>
        
      </ul>
      
    </div>
  </header>
  <div class="md-post__content md-typeset">
    <h2 id="solhsacom-tutorials"><a class="toclink" href="2024/01/23/solhsacom---tutorials/">solhsa.com - tutorials</a></h2>
<p><img class="cover" src="https://solhsa.com/interpolation/linear.gif" width="300"></p>
<p>A visual and simple explanation of the calculations for easing. Much easier to follow because they pull out the bit that is needed.
* <strong>Link to site:</strong> <strong><a href="https://solhsa.com/interpolation/">solhsa.com - tutorials</a></strong></p>
    <nav class="md-post__action">
      <a href="2024/01/23/solhsacom---tutorials/">
        Continue reading
      </a>
    </nav>
  </div>
</article>