Tailwind

Make grid columns the same height

0

91

Hello,

Losing my sanity here with a simple issue. It only happens when there are validation errors. Any ideas?

Tried all of the alignment utilities for both Grid and Flexbox.

Image

(simplified)

<div class="grid grid-cols-12 items-center gap-4">
    <div class="col-span-4">
        <InputLabel for="a" value="Field A" />

        <TextInput class="block w-full" placeholder="Foo" />

        <InputError message="Lorem ipsum dolor sit amet." />
    </div>

    <div class="col-span-4">
        <InputLabel for="b" value="Field B" />

        <TextInput class="block w-full" placeholder="Foo" />

        <InputError message="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, similique." />
    </div>

    <div class="col-span-4">
        <InputLabel for="c" value="Field C" />

        <TextInput class="block w-full" placeholder="Foo" />

        <InputError message="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, similique." />
    </div>
</div>

Here's the InputError component:

    <span v-if="message" class="text-sm text-red-600">
        {{ message }}
    </span>

It's always the simple issues, huh.