Subgrid

Baseline 2023 (Chrome 117, Safari 16, Firefox 71); widely available.

Chrome 117Edge 117Safari 16Firefox 71

A nested grid can adopt its parent's row or column tracks, so card titles, bodies and footers align across a row of cards even when content lengths differ.

Starter
Short blurb.
Choose
Team plan
Much longer description that pushes the button down, but only here.
Choose
Enterprise
Medium copy.
Choose

CSS

.fx-005 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  font-family: system-ui
}
.fx-005 li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 8px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px
}
.fx-005 a {
  align-self: end;
  justify-self: start;
  padding: 8px 14px;
  background: #111;
  color: #fff;
  border-radius: 6px;
  text-decoration: none
}
.fx-005 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<ul class="fx-005">
  <li><h3>Starter</h3><p>Short blurb.</p><a href="#">Choose</a></li>
  <li><h3>Team plan</h3><p>Much longer description that pushes the button down, but only here.</p><a href="#">Choose</a></li>
  <li><h3>Enterprise</h3><p>Medium copy.</p><a href="#">Choose</a></li>
</ul>

Fallback: Without subgrid each card lays out its own rows; buttons stop aligning but nothing overlaps.

Source: developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid

Prompt

Use CSS subgrid for aligned card rows: the list is a grid, each card sets `display:grid; grid-template-rows: subgrid; grid-row: span N` where N is the number of internal rows (title, body, action). Do not fix heights or use JS equal-height hacks; let subgrid align the tracks.