Icon + text adapts to container

Stacked in narrow containers, horizontal in wide ones — pure CSS via @container.

Notification

This item reflows based on container width, not viewport size.

Widely supported

layoutno-js

Quick implementation

/* HTML: <div class="icon-text-wrapper"><div class="icon-text"><div class="icon">I</div><div class="content"><h3>Title</h3><p>Text</p></div></div></div> */

.icon-text-wrapper {
  container-type: inline-size;
  container-name: icon-text;
}

.icon-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--accent);
  border-radius: var(--radius);
  color: white;
  font-weight: 700;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Switch to horizontal layout at 24rem */
@container icon-text (min-width: 24rem) {
  .icon-text {
    flex-direction: row;
    align-items: center;
  }

  .content {
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
  }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer specializing in modern CSS layout.

Goal: Build an icon + text component that switches from stacked to horizontal layout based on container width.

Technical constraints:
- Use container-type: inline-size and @container queries to detect parent width.
- Start with flex-direction: column, then switch to flex-direction: row at a specific breakpoint.
- Use oklch() for all colors (icon background, text, muted text) — no hex or rgba().
- Gap property for spacing between icon and text, and between title and description.
- Ensure focus-visible styles are preserved for keyboard accessibility.

Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept `icon`, `title`, `text`, `className` props; container width controlled by parent.

Edge cases to handle:
- Very narrow containers (<12rem): ensure icon doesn't overflow, consider reducing size.
- Very wide containers: maintain reasonable max-width for the content.
- Screen readers: use aria-hidden on decorative icon elements.
- Reduced motion: no animations, but ensure layout shift is smooth and doesn't cause jarring jumps.

Return HTML + CSS with container query breakpoints clearly commented.

Why this matters in 2026

Container queries let components adapt to their surroundings, not just the viewport. An icon + text row in a sidebar might need to stack vertically in a narrow rail but flow horizontally in a wide panel. Previously, you'd need media queries tied to the viewport or JavaScript to detect parent size. Now, @container handles it cleanly in CSS.

The logic

container-type: inline-size on the wrapper establishes a containing block for size queries. The @container (min-width: 24rem) rule then checks the wrapper's width, not the viewport. Inside, we flip flex-direction from column to row, and reorganize the content flow accordingly. The icon stays 3rem square; only the layout changes.

Why flexbox? Flex is ideal for one-dimensional reflow. Switching flex-direction is all you need to go from stack to row — no grid rewrite, no position changes.

Accessibility & performance

Icons should be aria-hidden if decorative; otherwise, include descriptive text or aria-label. Focus rings remain intact since we're not removing outline styles. Container queries are performant — browsers recalculate styles only when the container size changes, not on every viewport resize. Avoid nesting too many container queries deep, as that can trigger cascading reflows.

Tip: Set container-type: inline-size on the nearest parent you control, not necessarily the immediate wrapper. This gives you flexibility in where the query boundary sits.