Center Split Flex Stack

A center split flex stack built with pure HTML and CSS that divides content into two groups positioned on either side of a central anchor, creating symmetrical balance while allowing each side to grow or shrink independently without JavaScript or fixed layouts.

Usage

This component is ideal for interfaces where content should revolve around a focal point, such as headers with a centered logo, control bars with primary actions in the middle, comparison layouts with a divider, or balanced UI sections that need visual symmetry.

Implementation

The layout is implemented using CSS Flexbox with auto margins, center alignment, and flexible item grouping, allowing elements to split naturally around the center while remaining responsive and lightweight.

HTML

<div class="flex-split">
  <span>Left</span>
  <span>Right</span>
</div>

<div class="flex-split">
  <span>Left</span>
  <span>Right</span>
</div>

CSS

.flex-split {
  width: 200px;
  padding: 0.5rem 0.75rem;
  border-radius: 14px;
  background: #f9fafb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.flex-split span {
  color: #374151;
}

@media (prefers-color-scheme: dark) {
  .flex-split {
    background: #020617;
  }

  .flex-split span {
    color: #e5e7eb;
  }
}

.flex-split {
  width: 200px;
  padding: 0.5rem 0.75rem;
  border-radius: 14px;
  background: #f9fafb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.flex-split span {
  color: #374151;
}

@media (prefers-color-scheme: dark) {
  .flex-split {
    background: #020617;
  }

  .flex-split span {
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Splits content evenly around a center anchor
• Maintains symmetry with flexible spacing
• Adapts cleanly to varying content widths
• Designed for balanced, center focused layouts

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.