how to make the components in same height in vue - html

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?