How to make two cards the same height

Question

How can I make two cards for Black African Players and for White Players the same height All those cards is using the same class is there perhaps a way to make it the same height

div.card {
    overflow: hidden;
}

.card {
    width: 100%;
    padding: 9px 20px 9px 20px;
    margin-bottom: 0px;
    background: #ffffff;
    box-shadow: 1px 1px 1px #dfdfdf;
    box-sizing: border-box;
    height: 100% !important;

Answer 1

Flexbox comes in handy here. Notice how the last element (with three <br>'s is taller than the other two, yet they are all the same height:

* { box-sizing: border-box; }

.container { 
  display: flex; 
  flex-flow: row wrap;
}

.card-wrap {
  flex: 0 0 33.333%;
  display: flex;
  padding: 10px; /* gutter width */
}

.card {
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  flex: 0 0 100%;
}

<div class="container">
<div class="card-wrap">
  <div class="card"><br></div>
</div>
<div class="card-wrap">
  <div class="card"><br></div>
</div>
<div class="card-wrap">
  <div class="card"><br><br><br></div>
</div>
</div>

Answer 2

.container {
  width: 100%;/*whatever size you want your container*/
  border: 3px solid teal;
  display: flex; /*Make sure to call this on your container*/
  align-items: stretch; /*stretches all cards same height*/
  justify-content: space-around; /*some space between cards*/
}

.card {
  width: 150px; /*or whatever size card you want*/
  border: 2px solid red;
}

<div class="container">

  <div class="card">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </div>
  
  <div class="card">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
  
  <div class="card">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
  
</div>

This is what worked best for me,

I set display: flex on the container of the cards (not the card itself)

It is flex-direction: row by default when you say display: flex

and then simply added align-items: stretch on the container as well...

This caused my cards to have an equal height. (This solution works only when your flex-direction is set to row)

Hope this helps