An equal height action row built with pure HTML and CSS that ensures all action items such as buttons, controls, or cards maintain the same height regardless of content length, creating a clean and balanced horizontal layout without JavaScript.
Usage
This component is ideal for interfaces where visual consistency improves usability, such as button groups, pricing actions, comparison rows, toolbar actions, or call-to-action sections where uneven heights would look unpolished.
Implementation
The row is implemented using CSS Flexbox with stretch alignment and consistent padding rules, allowing each action item to expand evenly and align perfectly while remaining responsive across screen sizes.
HTML
<div class="flex-equal">
<div class="flex-equal__item">One</div>
<div class="flex-equal__item">Two</div>
</div>CSS
.flex-equal {
width: 200px;
display: flex;
gap: 0.4rem;
align-items: stretch;
}
.flex-equal__item {
flex: 1;
padding: 0.6rem 0;
border-radius: 12px;
background: #ffffff;
color: #111827;
font-size: 12px;
text-align: center;
box-shadow: 0 8px 16px rgba(0,0,0,0.12);
transition: transform 150ms ease, background 150ms ease;
}
.flex-equal__item:hover {
transform: translateY(-1px);
background: #eef2ff;
}
@media (prefers-color-scheme: dark) {
.flex-equal__item {
background: #020617;
color: #e5e7eb;
}
.flex-equal__item:hover {
background: #1e1b4b;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Forces uniform height across actions
- Handles variable text lengths cleanly
- Improves visual balance and polish
- Designed for action driven UI rows
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.