After some battles, I've almost got a form looking and working like I like using my own input component that basically wraps this:

<div>
    <Field data-invalid={sp.invalid} orientation="horizontal" className="grid grid-cols-[120px_450px] gap-4">
        <FieldContent>
            <FieldLabel htmlFor={sp.id}>{sp.label}</FieldLabel>
        </FieldContent>
        <FieldContent>
            <Input
                type={sp.type}

and I use these in a form like this:

<div className="w-full">
    <h1 className="pb-3">Edit Product: {name}</h1>
    <Form action={formAction} id={formId}>
        <FieldGroup>
            <Input id="id" name="id" type="hidden" defaultValue={formState.values?.id} readOnly></Input>
            <h2>Product Properties</h2>
            <FormInputField name="name" required formState={formState} disabled={pending} />
            <FormInputField name="variant" formState={formState} disabled={pending} />

but I'm stuck with label rendering at the top of it's group div, while the input appears vertically centered. I can achieve what I want by adding padding to the to the label's group like this:

<FieldContent className="pt-1.5">

but that's terribly fixed for how the form is currently sized. How can I get the label verticlally centered in its group div? The two group divs are aligned fine.