Primeflex equal height of column

Question

I'm trying to use the primeflex, how do I make the column have the equal height like when the column is taller than the others, the others will adjust to the height of the tallest to make it equal. This is my code

    <template>
    <div class="card p-2">
        <div class="grid">
            <div class="col">

                <div class="flex-wrap text-left p-3 font-normal text-4xl">We're here to help</div>
            </div>
        </div>
        <div class="grid">
            <div class="col">
                <div class="text-center p-3 border-round-sm ">Search Bar Component</div>
            </div>
        </div>
        <div class="flex flex-row flex-wrap">
            <div class="col-12 md:col-6 lg:col-3 flex flex-column">
                <Card style="overflow: hidden" class="shadow-3">
                    <template #title>
                        <i class="pi pi-question-circle"></i> Setting Up
                    </template>

                    <template #content>
                        <p class="m-0">
                            Effortlessly configure your Platform with our step-by-step setup guide
                        </p>
                    </template>

                    <template #footer>
                        <div class="flex gap-3 mt-1">
                            <Button label="Learn More" icon="pi pi-arrow-right" severity="secondary" outlined
                                class="w-full" />
                        </div>
                    </template>
                </Card>
            </div>
            <div class="col-12 md:col-6 lg:col-3 flex flex-column">
                <Card style="overflow: hidden" class="shadow-3">
                    <template #title>
                        <i class="pi pi-question-circle"style="font-size: 1.3rem" ></i> Project Setup
                    </template>

                    <template #content>
                        <p class="m-0">
                            Your comprehensive roadmap for navigating through the intricacies of the Platform
                        </p>
                    </template>

                    <template #footer>
                        <div class="flex gap-3 mt-1">
                            <Button label="Learn More" icon="pi pi-arrow-right" severity="secondary" outlined
                                class="w-full" />
                        </div>
                    </template>
                </Card>
            </div>
            <div class="col-12 md:col-6 lg:col-3 flex flex-column">
                <Card style="overflow: hidden" class="shadow-3">
                    <template #title>
                        <i class="pi pi-question-circle"></i> Setting Up
                    </template>

                    <template #content>
                        <p class="m-0">
                            Effortlessly configure your Platform with our step-by-step setup guide
                            Effortlessly configure your Platform with our step-by-step setup guide
                        </p>
                    </template>

                    <template #footer>
                        <div class="flex gap-3 mt-1">
                            <Button label="Learn More" icon="pi pi-arrow-right" severity="secondary" outlined
                                class="w-full" />
                        </div>
                    </template>
                </Card>
            </div>
            <div class="col-12 md:col-6 lg:col-3 flex flex-column">
                <Card style="overflow: hidden" class="shadow-3">
                    <template #title>
                        <i class="pi pi-question-circle"></i> Setting Up
                    </template>

                    <template #content>
                        <p class="m-0">
                            Effortlessly configure your Platform with our step-by-step setup guide
                        </p>
                    </template>

                    <template #footer>
                        <div class="flex gap-3 mt-1">
                            <Button label="Learn More" icon="pi pi-arrow-right" severity="secondary" outlined
                                class="w-full" />
                        </div>
                    </template>
                </Card>
            </div>
        </div>
        <div class="grid">
            <div class="col-12 sm:col-6">
                <div class="text-left p-3 border-round-sm ">Bookmark Component</div>
            </div>
            <div class="col-12 sm:col-6">
                <div class="text-left p-3 border-round-sm ">Favorite Component</div>
            </div>
        </div>
    </div>
</template>

<script setup></script>

<style scoped>
.pi-question-circle {
    font-size: 1.3rem;
}
</style> 

The shortest column should adjust to the height of the tallest column but I don't know how to do it. Can anyone help me