Responsive Two Column Block

A responsive two column block built with pure HTML and CSS that displays content side by side on larger screens and automatically stacks vertically on smaller devices, ensuring clarity and usability without relying on JavaScript.

Usage

This component is ideal for layouts where paired content improves comprehension, such as text with supporting visuals, explanations next to examples, feature descriptions alongside icons, or marketing sections that need balanced presentation across devices.

Implementation

The responsive behavior is implemented using CSS Grid or Flexbox with breakpoint based direction changes, allowing the two columns to sit evenly on desktop and transition smoothly into a vertical stack on mobile screens.

HTML

<div class="ss-two-col">
  <div>Content</div>
  <div>Image</div>
</div>

<div class="ss-two-col">
  <div>Content</div>
  <div>Image</div>
</div>

CSS

.ss-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

@media (max-width:640px){
  .ss-two-col{
    grid-template-columns:1fr;
  }
}

.ss-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

@media (max-width:640px){
  .ss-two-col{
    grid-template-columns:1fr;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Displays two columns on larger screens
• Automatically stacks on smaller devices
• Maintains logical content order
• Designed for device flexible 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.