title: Placing different sizes images underneath each other
body: <p>I am facing a problem while coding my own Wordpress theme. I have featured images of each blog posts displaying on my home page. I would like to make it look like a gallery. So I want the images to display under each other and next to each other, though they are different sizes. See the picture to see how far I've come:</p>
  
  <p><a href="https://i.stack.imgur.com/021QE.png" rel="nofollow noreferrer">picture</a></p>
  
  <p>So what I want to accomplish is, to display the blossom image under the New York one, and next to the 'c'est la vie' one. Is there any way to that? </p>
  
  <p>I would really appreciate your help!
  My HTML code: </p>
  
  <pre><code>&lt;div class="post"&gt;
  
     &lt;div class="outer-wrapper"&gt;
        &lt;div class="imagefilter"&gt;
           &lt;a href='&lt;?php the_permalink(); ?&gt;'&gt;&lt;?php 
   the_post_thumbnail('mythumbnail');?&gt;&lt;/a&gt;
         &lt;/div&gt;
  
            &lt;div class="text-wrapper"&gt;
            &lt;span class="blogpost"&gt;&lt;h2 class="post-title"&gt;&lt;a href="&lt;?php 
            the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;&lt;/span&gt;
         &lt;/div&gt;   
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>My CSS looks like this: </p>
  
  <pre><code>.outer-wrapper {
    position: relative;
    width: 470px;
    height: 100%;
    margin: 0px;
     padding: 0px;
    float: left;}
  
  
   .text-wrapper {
    position: absolute;
    width: 470px;
    text-align: center;
    font-size: 12px;
     display: table;
    top: 50%;
    height: 100%;
     line-height: 0px;
    opacity: 0;}
  </code></pre>