I have a bunch of divs representing fields that a user has to fill in for a newsletter. These fields can be eliminated elsewhere via a content asset.

For more context we have: Email, name, last name, date of birth and cell number, the last two being optional.
Newsletter fields

I need to make it so that when one of these fields is removed, the other fields slide into place in order to occupy the space that was created by the absence of the removed field.

I’m new to CSS and coding in general and was wondering if there was any style I’m overlooking? I keep finding posts saying I need to use JQuery or JS but I was told it wasn’t necessary.

I’ve tried moving around the fields using in-line styles but when I remove one field, the others fall into place, overlapping existing ones.

For example, I removed the Last Name field (cognome) and the cellphone field (telefono cellulare) ended up overlapping over Nome (name).
enter image description here

I’ve been trying with flex, float, creating a new div to wrap them all in with display: grid; but no matter what I do, I can’t seem to get them to work properly.

Is there a way to style them so each div pushes away from one another?