Help aligning fields with error message

[rhuanyago]

If anyone could help me tell me how you solve this problem I would be very grateful.

<form class="my-6 w-full space-y-6" wire:submit="create">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:input
                label="Nome"
                placeholder="Ex: Pneu 205/55 R16"
                wire:model="userForm.name"
                clearable
                required
            />

            <flux:input
                label="E-mail"
                type="email"
                wire:model="userForm.email"
                clearable
                required
            />
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:input
                wire:model="userForm.password"
                :label="__('New password')"
                type="password"
                required
                autocomplete="new-password"
                viewable
                clearable
            />

            <flux:input
                wire:model="userForm.password_confirmation"
                :label="__('Confirm Password')"
                type="password"
                required
                autocomplete="new-password"
                viewable
                clearable
            />
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <flux:field>
                <flux:label badge="Optional">Phone number</flux:label>
                <flux:input
                    wire:model="userForm.phone"
                    x-mask:dynamic="phoneMask($input)"
                    placeholder="(99) 99999-9999"
                    clearable
                />
                <flux:error name="userForm.phone" />
            </flux:field>

            <flux:select variant="listbox" placeholder="Selecione um gênero..." label="Gênero" clearable wire:model="userForm.gender">
                <flux:select.option>Photography</flux:select.option>
                <flux:select.option>Design services</flux:select.option>
                <flux:select.option>Web development</flux:select.option>
            </flux:select>

            <flux:date-picker wire:model="userForm.date_of_birth" label="Data de nascimento">
                <x-slot name="trigger">
                    <flux:date-picker.input />
                </x-slot>

                <flux:error name="userForm.date_of_birth" />
            </flux:date-picker>
        </div>

        <flux:select variant="listbox" placeholder="Selecione uma função..." label="Função" wire:model="userForm.role">
            <flux:select.option>Photography</flux:select.option>
            <flux:select.option>Design services</flux:select.option>
            <flux:select.option>Web development</flux:select.option>
            <flux:select.option>Accounting</flux:select.option>
        </flux:select>

        <flux:separator variant="subtle" />

        <flux:fieldset>
            <flux:legend>Barbeiro</flux:legend>

            <div class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <flux:pillbox multiple searchable placeholder="Choose skills..." label="Serviços" wire:model="userForm.services" clearable>
                        @foreach($this->services as $service)
                            <flux:pillbox.option value="{{ $service['id'] }}">{{ $service['name'] }}</flux:pillbox.option>
                        @endforeach
                    </flux:pillbox>

                    <flux:input
                        mask:dynamic="$money($input, ',', '.', 0)"
                        x-on:input="
                            if ($event.target.value.replace(/\D/g, '') > 100) {
                                $event.target.value = '100'
                            }
                        "
                        placeholder="3"
                        label="Comissão"
                        icon="percent"
                        wire:model="commission"
                        clearable
                        max="2"
                    />
                </div>

                <flux:textarea rows="2" label="Bio" placeholder="Write a short bio about yourself..." wire:model="bio" />
            </div>
        </flux:fieldset>

        <flux:separator variant="subtle" />

        <flux:fieldset>
            <flux:legend>Endereço</flux:legend>

            <div class="space-y-6">
                <flux:field>
                    <flux:input.group class="max-w-56">
                        <flux:input placeholder="CEP" wire:model="addressForm.zip_code" x-mask="99999-999" clearable />
                        <flux:button icon="magnifying-glass" wire:click="searchAddress" />
                    </flux:input.group>
                    <flux:error name="addressForm.zip_code" />
                </flux:field>

                <flux:input label="Rua" class="md:col-span-4" wire:model="addressForm.street" placeholder="123 Avenida Principal" />

                <div class="grid md:grid-cols-2 gap-4">
                    <flux:input label="Número" wire:model="addressForm.number" placeholder="Ex: 123" />
                    <flux:input label="Complemento" wire:model="addressForm.complement" placeholder="Ex: Apt. 50 Bloco B" />
                </div>

                <div class="grid md:grid-cols-3 gap-4">
                    <flux:input label="Bairro" wire:model="addressForm.neighborhood" placeholder="Ex: Jardim das Flores" />
                    <flux:input label="Cidade" wire:model="addressForm.city" placeholder="São Paulo" />
                    <flux:input label="Estado" wire:model="addressForm.state" placeholder="SP" mask="aa" />
                </div>
            </div>
        </flux:fieldset>

        <flux:separator variant="subtle" />
        <div class="flex gap-2">
            <flux:spacer  />
            <flux:button type="submit" variant="ghost">Cancelar</flux:button>
            <flux:button type="submit" variant="primary">Salvar</flux:button>
        </div>
    </form>

[kylewallace]

Can you just put a parent div to wrap any element that is the child of a grid?

Example:

<div class="grid grid-cols-#">
    <div>
        <flux:input></flux:input>
    </div>
    <div>
        <flux:fieldset></flux:fieldset>
    </div>
</div>

As opposed to:

<div class="grid grid-cols-#">
    <flux:input></flux:input>
    <flux:fieldset></flux:fieldset>
</div>

[rhuanyago]

Man, I feel embarrassed 😅, it worked, thank you so much.