title: How to keep CSS block height equal when loading content over JSON feed
body: <p>I've come across a problem with a lot of moving parts and have been banging my head against the wall with it for a while.</p>
  
  <p>In short, I need to pull JSON data into the WordPress page (done, no problems there) and have it display in a table-like format of blocks. I've attached an image mockup of what I'm aiming for here: <a href="https://i.imgur.com/HAaKPYj.jpg" rel="nofollow noreferrer">https://i.imgur.com/HAaKPYj.jpg</a></p>
  
  <p>I've gotten to the point where the boxes are displaying properly - three per row, wrapping fine, so forth. The one remaining thing is I can't seem to get the box heights to be the same width in each row.</p>
  
  <p>I know this can be done with rows and something like Flexbox, but the problem is I'm pulling in from a JSON feed and have only created the singular loop <code>foreach</code> item. I'm completely fine with re-doing the CSS entirely if there's a good approach to handling it that would give equal-height boxes.</p>
  
  <p>Roughly, the box structure is:</p>
  
  <pre><code>&lt;div class="single-event"&gt;
      &lt;img src="example.jpg"&gt;
      &lt;div class="event-details"&gt;
          &lt;div class="event-type"&gt;In-Person&lt;/div&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;p&gt;The excerpt/description pulled from the feed&lt;/p&gt;
          &lt;a href="#feed-url"&gt;&amp;raquo;&lt;/a&gt;
      &lt;/div&gt;&lt;!-- end .event-details --&gt;
  &lt;/div&gt;&lt;!-- end .single-event --&gt;
  </code></pre>
  
  <p>Is there a clever CSS trick I'm not aware of to do this, or would using something like JavaScript to insert flexbox rows every three items be the best solution, and if so, is there a guide on how to start tackling that?</p>
  
  <p>Thank you in advance!</p>