align items in pricing page

by opensas

HTML

<link rel="stylesheet" href="https://unpkg.com/browse/[email protected]/normalize.css">
<body>
  <div class="root">
    <div id="pricing" class="pricing">

      <div class="plans">

        <div class="plan" id="PP1258915598215363">
          <div class="header">
            <div class="title">Basic service desk</div>
            <div class="description">Basic service desk support plan. For companies that just started and need help looking after their userbase.</div>
          </div>
          <div class="price">
            <span class="amount">$10</span>
            <span class="billing-cycle">billed monthly</span>
          </div>
          <div class="buy">
            <a class="buy-button" href="https://pricing.test.wingback.com/examples/null">Choose plan</a>
          </div>
          <ol class="features">
            <li class="feature">Public repositories</li>
            <li class="feature">Team Collaboration</li>
            <li class="feature">Ticket Trend Report</li>
            <li class="feature">Multiple users</li>
          </ol>
        </div>

        <div class="plan" id="PP4072474523116192">
          <div class="header">
            <div class="title">Medium service desk plan</div>
            <div class="description">For companies with a growing user base.</div>
          </div>
          <div class="price">
            <span class="amount">$18</span>
            <span class="billing-cycle">billed monthly</span>
          </div>
          <div class="buy">
            <a class="buy-button" href="https://pricing.test.wingback.com/examples/null">Choose plan</a>
          </div>
          <ol class="features">
            <li class="feature">Custom Email Server</li>
            <li class="feature">Custom Ticket Views</li>
            <li class="feature">Ticket Fields Status</li>
            <li class="feature">Collision Detection</li>
            <li class="feature">Custom SSL</li>
            <li class="feature">Time tracking</li>
         ...

CSS

.pricing {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  ;
  padding: 1rem;
  /* 16px */
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  /* 16px */
}

.pricing .plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 290px));
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  /* 16px */
}

.pricing .plan {
  border: 1px solid #E5E7E9;
  /* neutral-300 */
  border-radius: 0.5rem
    /* 8px */
  ;
}

.pricing .plan .header {
  padding: 1rem
    /* 16px */
  ;
  border-bottom-width: 1px;
  border-style: none none solid none;
  border-color: #F3F4F5;
  /* neutral-200 */
}

.pricing .plan .header .title {
  font-size: 1rem;
  /* 16px */
  /* text-h300 */
  line-height: 150%;
  /* text-h300 */
  font-weight: 600;
  /* font-semibold */
}

.pricing .plan .header .description {
  padding: 0.25rem 0 1rem 0;
  /* top: 4px, bottom: 16px */
  font-size: 0.875rem
    /* 14px */
  ;
  /* text-h200 */
  line-height: 145%;
  /* text-h200 */
  color: #6D7A87;
  /* text-neutral-600 */
  overflow: hidden;
}

.pricing .plan .price {
  padding: 1rem
    /* 16px */
  ;
  padding-bottom: 0.5rem
    /* 8px */
  ;

  display: grid;
  grid-auto-flow: column;
  width: fit-content;
  align-items: center;
  gap: 0.5rem
    /* 8px */
  ;
}

.pricing .plan .price .amount {
  color: #101113;
  /* text-neutral-900 */
  font-size: 2.5rem;
  /* 40px */
  /* text-h200 */
  line-height: 120%;
  /* text-h200 */
  font-weight: 600;
}

.pricing .plan .price .billing-cycle {
  color: #6D7A87;
  /* text-neutral-600 */
  font-size: 0.875rem
    /* 14px */
  ;
  /* text-h200 */
  line-height: 145%;
  /* text-h200 */
}

.pricing .plan .buy {
  padding: 0 1rem 1rem 1rem;
  /* top: 0, right: 16px, bottom: 16px, left: 16px */

  display: flex;
  flex-direction: column;
 ...