how to make the components in same height in vue

Question

I have a ticket component in vue:

<template>
        <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 single-ticket-col">
            <div class="single-ticket">
                <div type="ticket" class="widget --flex-column">
                    <div class="top --flex-column">
                        <div class="ticket-type -bold">{{ product.attributes.name }}</div>
                        <!--                    TODO: Change image url to product's image-->
                        <img :src="image" alt="Product Image" />
                        <div class="deetz --flex-row-j!sb">
                            <div class="event --flex-column">
                                <div class="date">{{ formatDate(product.attributes.date) }}</div>
                                <div class="price">€ {{ priceCalculationCheapest(product) }} - € {{ priceCalculationExpensive(product) }} <span>(Inkl. Mwst.)</span></div>
                                <div v-for="variation in product.attributes.variations">
                                    <div class="variation">
                                        {{variation.name}}
                                        <div v-if="variation.scales.length != 0">
                                            <div v-for="scale in variation.scales">
                                                {{scale.from_amount}} for € {{scale.price_incl_vat}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rip"></div>
                    <div class="bottom --flex-row-j!sb">
                        <router-link :to="{name: 'products', params: {id: product.id}}" class="btn button">Auswählen</router-link>
                    </div>
                </div>
            </div>
        </div>
</template>

And some tickets have extra information, that's why they are not in the same height sometimes as you can see in the picture:

As a main div of the component I defined as all-tickets and I wrote my css like this:

.all-tickets {
    display: flex;
    width: 100%;
}

.all-tickets .single-ticket-col {
    flex: 1;
}

But I am not successful. Could you please help me in this topic how can i make them in the same height?