Firefox acting strange with inline-blocks

[prelol]

I was messing with inline-blocks, but then i looked at it in firefox, this one line of css changes the height of a div based on if it has content or not?

Here's the minimum code to reproduce..
playground

<div class="my-8 flex w-1/2 items-end gap-2 rounded-3xl border border-neutral-100 bg-blue-50 p-4">
    <div class="inline-block"> <!-- this changes the height in firefox?-->
      <div #editableDiv contenteditable="true" class="inline-block min-h-6 min-w-5 bg-red-100"></div>
    </div>
</div>

I've been looking for some explanation, but can't find anything specifically on this behaviour.
Is there a workaround? Is this just firefox? I need the inline-block for other elements there 😟

Thanks in advance!