Textarea messes the form layout

[yangsystem]

If I change the flux:input to flux:textarea to the "descriere_produs_achizitii" model, I get lots of spaces between firlds.
I have cleared the caches with no luck.

<div>
    <flux:heading size="lg">Adauga client</flux:heading>
    
    <form>
        <div class="grid gap-4 grid-cols-2 grid-rows-3">
            <flux:input wire:model="nume_produs_achizitii" type="text" label="Produs *" placeholder="Proiector"/>
            <flux:input wire:model="cantitate_produs_achizitii" type="number" label="Cantitate *" placeholder="1" min="1"/>

            <flux:input wire:model="buget_total_achizitii" type="number" label="Buget total estimat" placeholder="1"/>
            <flux:input wire:model="link_produs_achizitii" type="text" label="Link model" placeholder="https://emag.ro/jucarii"/>

            <flux:input wire:model="descriere_produs_achizitii" label="Scurta descriere" />
            <flux:input type="file" wire:model="fisier_produs_achizitii" label="Poza model"/>
        </div>
        <flux:separator class="my-2"/>
        <flux:button class="float-end" wire:click="adauga_achizitie">Adauga</flux:button>
    </form>
</div>

<div>
    <flux:heading size="lg">Adauga client</flux:heading>
    
    <form>
        <div class="grid gap-4 grid-cols-2 grid-rows-3">
            <flux:input wire:model="nume_produs_achizitii" type="text" label="Produs *" placeholder="Proiector"/>
            <flux:input wire:model="cantitate_produs_achizitii" type="number" label="Cantitate *" placeholder="1" min="1"/>

            <flux:input wire:model="buget_total_achizitii" type="number" label="Buget total estimat" placeholder="1"/>
            <flux:input wire:model="link_produs_achizitii" type="text" label="Link model" placeholder="https://emag.ro/jucarii"/>

            <flux:textarea wire:model="descriere_produs_achizitii" label="Scurta descriere" />
            <flux:input type="file" wire:model="fisier_produs_achizitii" label="Poza model"/>
        </div>
        <flux:separator class="my-2"/>
        <flux:button class="float-end" wire:click="adauga_achizitie">Adauga</flux:button>
    </form>
</div>

[rikh42]

That is because you are using a grid from the following css in your wrapping div: grid gap-4 grid-cols-2 grid-rows-3

This will ensure that every block with the same height, so all blocks will be the height of the biggest one.