css: how to align elements making them have the height of the tallest one

I’m creating the following pricing page in HTML and CSS

I’d like the “Choose plan” to be aligned, that is, I would need the div.header elements to have the height of the largest one, depending on the title and description of the plan.

Here’s a jsfiddle with the html and css: https://jsfiddle.net/opensas/nxLbth5d/8/

For reference below is the whole code

How can I achieve it? preferable with plain CSS (no JavaScript)

<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>
          </ol>
        </div>

        <div class="plan" id="PP3070612550030584">
          <div class="header">
            <div class="title">Professional service desk with premium support</div>
            <div class="description">Professional service desk support</div>
          </div>
          <div class="price">
            <span class="amount">$60</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">Ticket Fields Status</li>
            <li class="feature">Custom Email Server</li>
            <li class="feature">Automation</li>
            <li class="feature">Customer Fields</li>
            <li class="feature">Custom Ticket Views</li>
            <li class="feature">Custom SSL</li>
            <li class="feature">Marketplace Apps</li>
            <li class="feature">Helpdesk Report</li>
            <li class="feature">Time tracking</li>
            <li class="feature">Collision Detection</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</body>
.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;
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
}

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

.pricing .plan {
  border: 1px solid #E5E7E9;
  border-radius: 0.5rem;
}

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

.pricing .plan .header .title {
  font-size: 1rem;
  line-height: 150%;
  font-weight: 600;
}

.pricing .plan .header .description {
  padding: 0.25rem 0 1rem 0;
  font-size: 0.875rem;
  line-height: 145%;
  color: #6D7A87;
  overflow: hidden;
}

.pricing .plan .price {
  padding: 1rem;
  padding-bottom: 0.5rem ;
  display: grid;
  grid-auto-flow: column;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
}

.pricing .plan .price .amount {
  color: #101113;
  font-size: 2.5rem;
  line-height: 120%;
  font-weight: 600;
}

.pricing .plan .price .billing-cycle {
  color: #6D7A87;
  font-size: 0.875rem;
  line-height: 145%;
}

.pricing .plan .buy {
  padding: 0 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom-width: 1px;
  border-style: none none solid none;
  border-color: #F3F4F5;
}

.pricing .plan .buy .buy-button {
  width: 100%;
  text-align: center;
  padding: 0.5rem 0 0.5rem 0;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E7E9;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 145%;
  color: #6D7A87;
  text-decoration: inherit;
}

.pricing .plan .features {
  padding: 1rem;
  display: grid;
  grid-auto-flow: row;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
}

.pricing .plan .features .feature {
  font-size: 0.875rem;
  line-height: 145%;
  color: #101113;
  font-weight: 400;
  margin-left: 1.5rem;
}

.pricing .plan .features .feature::before {
  position: absolute;
  margin-left: -1.5rem;
}

Leave a Comment