Wrap the image and heading in one container, then set that container to display: flex. Flexbox places its children in a row by default, so the image and title sit side by side. Add a gap, constrain the image, and let the heading use the remaining space.
Place the image beside the title with Flexbox
This pattern works well for a simple row with one image and one heading. Flexbox is designed for arranging items in a row or column, and the media object—media beside descriptive text—is a common use case. See MDN’s Flexbox use cases and its Flexbox guide.
<div class="media-heading">
<img src="photo.jpg" alt="A short description of the image">
<h2>Article title</h2>
</div>.media-heading {
display: flex;
align-items: center;
gap: 1rem;
}
.media-heading img {
display: block;
width: 5rem;
height: 5rem;
object-fit: cover;
flex: 0 0 auto;
}
.media-heading h2 {
margin: 0;
}
@media (max-width: 36rem) {
.media-heading {
align-items: flex-start;
}
}The five-rem image size, one-rem gap, and 36-rem breakpoint are example design choices, not universal requirements. Adjust them to fit your page and content.
What the key rules do
display: flexmakes the container’s direct children flex items. The default direction is a row, placing them side by side in the usual left-to-right writing context.gapadds space between the image and heading without adding margins to either item.align-items: centercenters the items vertically; useflex-startif aligning their top edges better suits the design.flex: 0 0 autoprevents the image from growing or shrinking. The heading can take the remaining room and wrap as needed.object-fit: coverfills the set image dimensions by cropping the image when its proportions differ from the box.
Choose useful image and text behavior
Give the image dimensions that fit the component and keep the text region flexible. This prevents the image from taking over the row or collapsing when the title is long. For variable-sized images, a max-width constraint can be more suitable; MDN’s media-object example demonstrates a constrained image alongside growing content.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Write alternative text that conveys the image’s relevant information. If the image is purely decorative and adds no information beyond the adjacent title, use alt="" so assistive technology can skip it. Follow the site’s accessibility conventions.
Make the layout work at narrow widths
Check the component with the longest likely title, at narrow viewport widths, and with zoom. A row that looks balanced on a wide page can become cramped when text wraps. Responsive layouts commonly use flexible sizing and breakpoints when content no longer fits comfortably; see MDN’s responsive design guide.
If the image should move above the title on small screens, change the direction at a breakpoint:
@media (max-width: 36rem) {
.media-heading {
flex-direction: column;
align-items: flex-start;
}
}If the image should remain beside the title, keep the row and test that the title still has enough width to remain readable. Choose the breakpoint based on when your actual content feels squeezed, rather than treating 36rem as a required value.
When CSS Grid is a better fit
Use Flexbox for the straightforward one-image, one-title row. Grid is useful when the component needs explicit column sizes, named areas, or additional positions for other content. MDN shows media-object placement with Grid template areas and includes a two-column media object in its CSS layout cookbook.
| Choose | Best suited to |
|---|---|
| Flexbox | A simple row or column where items can grow, shrink, or wrap as space changes. |
| Grid | A layout that benefits from explicit tracks, named areas, or placement of several regions. |
Keep accessibility claims precise
A responsive layout should remain usable as its available width changes, but a particular Flexbox recipe does not by itself establish WCAG conformance. The W3C WAI’s C38 technique demonstrates Flexbox-based reflow for form labels and inputs; it is an example technique, not a requirement or proof that every image-and-title component conforms.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
