title: How to have square boxes with image and text
body: <p>Is it possible to have two square div boxes in one line with some space between them. And both of them starts with an image at the top followed by a headline some text and a button at the bottom?</p>
  
  <p>I've tried something with css:flex but ended up that it isn't possible to have both boxes the equal height and width and they had to be both a square.</p>
  
  <p>My problem is that on image is a little bit higher then the other one and now I can't get two sqaures with the same size. Even if the images are the same then there is a different in the text. Maybe some more words on the left and so there is again a different height that I can't handle.</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="box"&gt;
      &lt;img src="example1.jpg" /&gt;
      &lt;h2&gt;Headline 1&lt;/h2&gt;
      &lt;p&gt;Description 1&lt;/p&gt;
      &lt;button&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;img src="example2.jpg" /&gt;
      &lt;h2&gt;Headline 2&lt;/h2&gt;
      &lt;p&gt;Description 2 &lt;br&gt;with special line&lt;/p&gt;
      &lt;button&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  .wrapper { display:flex; flex-wrap:wrap;justfiy-content:space-between; width: 30vmax; }
  .box { flex: 0 0 40%; height: 50%; text-align:center; }
  </code></pre>
  
  <h1>EDIT</h1>
  
  <p>Thanks for your work. It looks nearly the same as mine.
  But unfortunately it isn't a square / quadrat in form.
  That was my goal in the question.
  I guess the problem is that a square / quadrat depends on its content. Or do I need javascript to achieve the height is equal to the width of the box.</p>