tailwindcss flex cols with different height position

Question

I am trying to achieve a positioning ala Pinterest.

When adding a row it fills the space from left to right then goes on the next line.

I am able to do it with same element height. But I am unable to get it working for different heights.

What I want it the 3rd design in my screenshot.

Do you have an idea?

Thanks

Here is my attempt https://play.tailwindcss.com/iIzk4Z32Q3

Answer 1

A bit hard to understand what you're trying to achieve but if you just want the blue bar to sit under the green bar, then you just need to wrap them in a parent div. Try this:

<div class="flex flex-row flex-wrap items-start">
  <div class="w-1/2">
    <div class="bg-green-500">
      <div class="h-4"></div>
    </div>
    <div class="bg-blue-500">
      <div class="h-4"></div>
    </div>
  </div>
  <div class="w-1/2 bg-red-500">
    <div class="h-12"></div>
  </div>
</div>