I’m trying to get two side by side cards to have the same height even though they have differing amounts of text content. And thus far using the css utilies of ion-align-items-stretch or ion-align-self-stretch is failing me. I feel like I’ve stuck them everywhere I possibly can but I get no joy. But others like ion-align-items-end or ion-align-items-center seem to work just fine.
I’m guessing it has something to do with the way a card works. What can I do here?
<ion-grid>
<ion-row class="ion-align-items-stretch">
<ion-col size-md="4" offset-md="2">
<ion-card class="service-card">
<ion-card-header class="ion-text-center">
<ion-card-title>Less Content</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size-md="4">
<ion-card class="service-card">
<ion-card-header class="ion-text-center">
<ion-card-title>More Content</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>...