동일한 높이의 가격표를 만드는 방법

 <div class="container">

<div class="pricing-grid">
      <ul>
        <li class="header">Basic</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>
     <div class="pricing-grid">
      <ul>
        <li class="header">Pro</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
        <li>Free Hosting</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>
     <div class="pricing-grid">
      <ul>
        <li class="header">Premium</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>

CSS

.container{
  max-width:1024px;
  margin:0 auto;
  display:flex;
}
li{
  list-style-type:none;
  padding:30px;
  border-bottom:1px solid rgba(0, 0, 0, 0.3);
}
li:last-child{
  border-bottom:0;
}
li.header{
  border-bottom:0;
  background-color:black;
  color:#fff;
  padding:20px;
}
ul{
  margin:0;
  padding:0;
}
button{
  padding:12px 20px;
  border:none;
  background-color:#000;
  color:#fff;
  align-items:flex-end;
}

.pricing-grid{
  flex-grow:1;
  background-color:rgba(0, 0, 0, 0.1);
  margin:20px;
  text-align:center;
  border-radius:4px;
}

기대 😀

현실🤷‍♀️

.pricing-grid{
  display:flex;
  flex-wrap:wrap;
}
.pricing-grid > *{
  flex:1 1 100%;
}

.container{
  align-items:center;
}