Make ionic cards side by side the same height

Issue

I have two cards side by side:

<ion-content id="main">
  <ion-grid>
    <ion-row>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
          ...
        </ion-card>
      </ion-col>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
         ...
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

how do I make them the same height?

Solution

HTML file:

<ion-content id="main">
  <ion-grid>
    <ion-row>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
          <ion-card-title>Projected</ion-card-title>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elit felis, luctus in vehicula id, egestas
            sed magna.</p>
        </ion-card>
      </ion-col>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
          <ion-card-title>Required</ion-card-title>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

CSS file:

ion-col {
  display: flex;
}
ion-card {
  padding: 5px;
}

Answered By - Swapnil Rajput