Tailwind CSS expanding div affects neighboring div in flex

I have some layout similar to this: https://play.tailwindcss.com/WW3PM6nFPX

When I expand one view, the entire row of views beneath it is pushed down. How can I implement a similar layout but where only the column that the expanded view is within is affected?

The actual code is a div whose height changes on button click. Like this:

<div class="rounded-lg bg-blue-700 px-4 py-2">
  <div class="flex flex-row items-center">
    <h1 class="font-semibold text-2xl">{project.name}</h1>
    <div class="flex-grow" />
    <Overflow />
  </div>
  <span>{project.desc}</span>
  <BadgeStatus />
</div>

BadgeStatus looks like this:

<div ref={dropdownRef} 
  class="flex flex-row mx-2 mb-2 mt-2 px-2 py-2 rounded-md bg-green-50"
  style={{height: height}}>
  <span>Test</span>
  <div class="flex-grow" />
  <button onClick={() => setOpen(!open)}>
    // Dropdown arrow //
  </button>
</div>

This is what the grid looks like normally:

And when I expand one of the views: