I’m building a Vue 3 form with dynamic rows (label + email/phone) inside a flex container. I want to show a trash/delete button only for rows that can be removed.

My current approach uses invisible (Tailwind = visibility: hidden) for the last row, but that leaves a blank space in the flex layout. The content is hidden but the element still occupies width, which causes a “gap” until the fields are filled.

When the delete button should not be visible, there should be no whitespace/gap at all.

Here is a simplified version:

What is the best way in Vue to hide/remove this button without leaving whitespace in a flex layout?