JS Bin Card group with vertical alignment // source https://jsbin.com/powosu

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Card group with vertical alignment">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
html {
  font-family: sans-serif
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #CAD0D2;
  border-radius: 4px;
  overflow: hidden;
}

.card--fixedWidth {
  max-width: 120px;
}

.card__description {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.card__descriptionIcon {
  max-height: 30px;
  margin-bottom: 10px;
}

.card__descriptionText {
  font-size: 12px;
  color: #57727C;
  text-align: center;
  max-width: calc(100% - 30px)
}

.card__price {
  text-align: center;
    color: #57727C;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 15px;
    border-top: 1px solid #D7DBDD;
    background-color: #EEF3F5;
}

.cardGroup {
  display: flex;
  border: 1px solid #CAD0D2;
  border-radius: 4px;
  overflow: hidden;
}

.cardGroup__card {
  flex: 1 1 0;
  border: none;
  border-radius: 0;
}

.cardGroup__card + .cardGroup__card {
  border-left: 1px solid #CAD0D2;
}

.cardGroup__cardDescription {
  flex: 1 1 auto;
}
</style>
</head>
<body>
  <div class="cardGroup">
    
   <div class="card cardGroup__card">
     <div class="card__description cardGroup__cardDescription">
        <img class="card__descriptionIcon" src="https://d30y9cdsu7xlg0.cloudfront.net/png/34882-200.png" alt="potion-icon">
        <div class="card__descriptionText">
          Science Potion
        </div>
      </div>
      <div class="card__price">Cost $5</div>
    </div>
    
   <div class="card cardGroup__card">
     <div class="card__description cardGroup__cardDescription ">
        <img class="card__descriptionIcon" src="https://d30y9cdsu7xlg0.cloudfront.net/png/34882-200.png" alt="potion-icon">
        <div class="card__descriptionText">
          Science Potion Science Potion Science Potion Science Potion
        </div>
      </div>
      <div class="card__price">Cost $5</div>
    </div>

<div class="card cardGroup__card">
     <div class="card__description cardGroup__cardDescription ">
        <img class="card__descriptionIcon" src="https://d30y9cdsu7xlg0.cloudfront.net/png/34882-200.png" alt="potion-icon">
        <div class="card__descriptionText">
          Science Potion Science Potion Science Potion Science Potion Science Potion Science Potion Science Potion Science Potion Science Potion
        </div>
      </div>
      <div class="card__price">Cost $5</div>
    </div>
    
  </div>