Playground cards have inconsistent heights #12739

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

The CodeSandbox and StackBlitz playground cards on the Docusaurus website can have different heights because their descriptions have different lengths. This results in uneven card layouts and misaligned footer buttons.

I'd like to make the cards in the same row consistent in height while keeping the layout responsive.

Reproducible demo

https://docusaurus.io/docs/playground

Steps to reproduce

1. Step 1: Open the Docusaurus website page containing the playground cards.
2. Step 2: Locate the CodeSandbox and StackBlitz cards.
3. Step 3. Compare their heights and the vertical alignment of their footer buttons.

Expected behavior

Playground cards in the same row should have consistent heights, and their footer buttons should align at the bottom.

Actual behavior

The cards may have different heights depending on their description lengths, resulting in uneven card bottoms and misaligned footer buttons.

Your environment

• Public source code: https://github.com/facebook/docusaurus
• Public site URL: https://docusaurus.io/docs/playground
• Docusaurus version used: break(rsdoctor): upgrade to Rsdoctor v2 for Rspack sites, keep Rsdoctor v1 for Webpack sites (AI-assisted) #12734
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Google Chrome | 155.0.8059.82 (Official Build) (64-bit), Node.js v24.21.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11 version 26H2

Self-service

• I'd be willing to fix this bug myself.