CSS网格布局中的多个相等行高

Question

如何使所有页脚（绿色背景）高度相同，同时保持内容高度相同？

当前输出：

所需的输出：

CodePen： https://codepen.io/yasincad/pen/poNPgYv

当前 HTML：

<div class="cards">
  <div class="card">
    <div>Long...<br><br><br>content</div>
    <div class="card-footer">
      <h3>Footer title</h3>
      <div>Long...<br><br>footer text</div>
    </div>
  </div>
  <div class="card">
    <div>Shorter content</div>
    <div class="card-footer">
      <h3>Footer title</h3>
      <div>Short footer text</div>
    </div>
  </div>
</div>

当前的 CSS：

.cards {
  width: 600px;
  column-gap: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.card {
  background-color: lightgrey;
  display: grid;
  grid-template-rows: 1fr auto auto;
}
.card-footer {
  background: lightgreen;
}

Answer 1

import java.util.Scanner;

   public class Coins
   {
     public static void main(String[] args)
     {
    double quarter, dime, nickel, penny, total;
    Scanner scan = new Scanner(System.in);
    
    System.out.println("Enter the amount of quarters you have: ");
    quarter = scan.nextDouble();
    
    System.out.println("Enter the amount of dimes you have: ");
    dime = scan.nextDouble();
    
    System.out.println("Enter the amount of nickel you have: ");
    nickel = scan.nextDouble();
    
    System.out.println("Enter the amount of pennies you have: ");
    penny = scan.nextDouble();
    
    total = quarter * 0.25 + dime * 0.10 + nickel * 0.05 + penny * 0.01;
    System.out.println("Your total is: $" + total);
  }
}

.cards {
  width: 83vw;
  column-gap: 3vw;
  display: flex;
 
}
.card {
  background-color: lightgrey;
  width:40vw;
 
}
.card-footer {
  background: lightgreen;
  width:40vw;
}