Need help positioning heading below location info in CSS layout

Other Questions Figma
1

CSS Layout Issue with Heading Placement

I’m working on a travel card component but struggling with the layout. I want the title to appear underneath the location details instead of next to them.

What I want: The heading should be positioned below the location icon and text, creating a vertical stack.

Current problem: Everything is displaying horizontally in a single row.

Here’s my React component:

import { FaMapMarkerAlt } from "react-icons/fa"

<div className="travel-card">
    <img src="https://source.unsplash.com/320x240/nature" className="destination-image" alt="travel-destination" />
    <div className="info-section">
        <FaMapMarkerAlt />
        <span>ICELAND</span>
        <span className="map-link">See on Map</span>
        <div className="title-wrapper">
            <h2>Northern Lights</h2>
        </div>
    </div>
</div>

And my CSS:

.travel-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.destination-image {
  height: 200px;
  width: 150px;
  border-radius: 8px;
  object-fit: cover;
}

.info-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.title-wrapper {
  display: inline-block;
}

.map-link {
  text-decoration: underline;
  color: #666;
}

How can I modify the CSS to make the heading drop to the next line below the location information?

2

Your .info-section has display: flex which puts everything in a row by default. Instead of switching the whole container to column, just wrap the location stuff (icon, country name, map link) in its own div like <div className="location-info"> and apply flex there. The title wrapper will drop below it naturally since it’s block-level. I’ve had better luck with this approach when different sections need their own spacing or alignment.

3

switch your .info-section to flex-direction: column - that’ll stack everything vertically instead of horizontally. you can probably drop align-items: baseline too since it’s not needed with column layout.

4

Your flexbox in .info-section is keeping everything in one row by default. Try adding flex-wrap: wrap to the .info-section and flex-basis: 100% to the .title-wrapper. This’ll force the heading to take full width and drop to a new line. Another option is ditching flexbox entirely on .info-section - just use display: block and wrap the location stuff in its own flex container if you need it. I’ve done both approaches on card layouts like this, and tweaking the flex properties usually gives you more flexibility.