[Erzan12]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

The CodeSandbox and StackBlitz playground cards can have different heights because their descriptions have different lengths. This results in an inconsistent layout and misaligned footer buttons.

This PR aims to make the playground cards in the same row have consistent heights and align their footer buttons at the bottom while preserving the responsive layout.

Test Plan

Verify that the playground cards have equal heights when their descriptions have different lengths.
Verify that the footer buttons are aligned at the bottom of each card.
Verify the layout on desktop and mobile screen sizes.
Run the relevant formatting, lint, and build checks.

Test links

Playground page: https://docusaurus.io/
Deploy preview: https://deploy-preview-12740--docusaurus-2.netlify.app/
Direct change preview: https://deploy-preview-12740--docusaurus-2.netlify.app/docs/playground/

Related issues/PRs

#12739

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	d671d97
🔍 Latest deploy log	https://app.netlify.com/projects/docusaurus-2/deploys/6ad5b05043409751d69591a6
😎 Deploy Preview	https://deploy-preview-12740--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.