How to recreate this layout from my design mockup

Other Questions Figma
1

CSS Layout Issue - Need Help with Positioning

I’m still learning CSS and running into trouble with positioning elements correctly. I have a design that shows how everything should look, but my current code isn’t matching it.

What I want: The title should appear below the location information, not next to it.

What I’m getting: Everything is lined up horizontally instead of stacking properly.

Here’s my HTML structure:

import { IoLocationOutline } from "react-icons/io5"

<div className="card-wrapper">
    <img src="https://source.unsplash.com/nature/400x300" className="location-image" alt="destination" />
    <div className="info-section">
        <IoLocationOutline />
        <p>NORWAY</p>
        <p className="map-link">See on Google Maps</p>
        <div className="title-wrapper">
            <h2>Northern Lights</h2>
        </div>
    </div>
</div>

And here’s my CSS:

.card-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-image {
  height: 180px;
  width: 140px;
  border-radius: 8px;
}

.info-section {
  display: flex;
  align-items: center;
  margin: 15px 25px;
}

.title-wrapper {
  display: block;
}

.map-link {
  text-decoration: underline;
}

How can I fix the positioning so the heading drops below the location tags?

2

Your .info-section is set to display: flex, which arranges elements in a horizontal row by default. To achieve the desired vertical stacking, you should add flex-direction: column to this class. Additionally, consider wrapping the location elements (icon, destination, map link) in a separate div to simplify spacing control. Remember to adjust align-items as needed to center or left-align the content.

3

yep, flexbox is set to row by default. just change your .info-section to flex-direction: column for vertical stacking. you might also wanna remove align-items: center if you don’t need everything centered horizontally.

4

The problem is that flex containers arrange items horizontally by default. To get your title below the location info, add flex-direction: column to your .info-section class. This’ll stack everything vertically instead of side by side. Also, if you want left-aligned text instead of centered, remove align-items: center from that container.

5

quick tip - get rid of align-items: center in your .info-section and throw in flex-direction: column. that should stack everything instead of keeping it horizontal like it is now.

6

Had the same issue when I started with flexbox! Your .info-section has display: flex but no direction specified, so it defaults to horizontal layout. Just add flex-direction: column to stack everything vertically. You can probably ditch the title wrapper too - let the h2 be a direct child of the info section once you fix the flex direction. Pro tip: use the gap property on your flex container instead of margins. Makes spacing way cleaner.