Q:

Align text next to image

I have a list of products with images and descriptions. How can I best align the learn more text so it is directly under the text description. I can solve this by adding margin-bottom to the image but this seems like a hack way to do it and doesn't work that well.
Please see this image as a better explanation of what I'm trying to achieve.

A:

Here is working example: Make sure to do clearfix after post or add overflow:hidden to it, because both of its child are floated.

.post {
  clear:both;
  overflow:hidden;
}
.post img {
  float:left;
  margin-right:15px;
  }
.post .post-Excerpt {
  float:left;
}
<div class="post">
  <img style="vertical-align:middle" src="https://placehold.it/160x160">
  <div class="post-excerpt">
  <h2>This is title</h2>
  <p>THis is lorem ipsum text that goes here as paragraph test. THis is lorem ipsum text that goes here as paragraph test. </p>
    <a href="#">Read more</a>
  </div>
</div>

