I'm trying to replicate this figma design-CodePudding

Hey I'm new into CSS but I dont know how to make this work. Please help me on how to make this work.

The desired outcome.

My outcome.

The problem is how to make the heading come under the location tags. like in the figma design?

Here is the HTML.

import { GrLocation } from "react-icons/gr"
<div className="container">
        <img src="https://source.unsplash.com/WLxQvbMyfas" className="main-img" alt="location-img" />
        <div className="tags-colum">
            <GrLocation />
            <p>JAPAN</p>
            <p className="underline-text">View on Google Maps</p>
            <div className="container-text">
                <h1>Mount Fuji</h1>
            </div>
        </div>
    </div>

Here is the CSS.

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

.main-img {
  height: 168px;
  width: 125px;
  border-radius: 5px;
}

.tags-colum {
  display: flex;
  align-items: center;
  margin: 20px 20px;
}

.container-text {
  display: block;
}

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

CodePudding user response：

Your problem is .tags-column is display: flex, so you cannot group all 3 of those elements together. Because the default flexbox is row-based style which means it will align all elements on the same row

For the fix,

Create a group of that left image and all content elements (.container)
Separate the location icon and JAPAN to another group with flexbox (.tags-colum)
Put Mount Fuji separately (.container-text)

Note that, .new-group is just an alias name which I'm using for demonstration, and it has no specific styles

import { GrLocation } from "react-icons/gr"
<div className="container">
        <img src="https://source.unsplash.com/WLxQvbMyfas" className="main-img" alt="location-img" />
        <div className="new-group">
           <div className="tags-colum">
              <GrLocation />
              <p>JAPAN</p>
              <p className="underline-text">View on Google Maps</p>
           </div>
           <div className="container-text">
              <h1>Mount Fuji</h1>
           </div>
        </div>
    </div>

CodePudding user response：

The issue is that you have used display flex to the .tags-colum ( which is the outermost parent) to fix this you can use flex-direction: column, yes adding this will make everything stacked up, so what's the solution? group your elements like this

    <div className="container">
<img src="https://source.unsplash.com/WLxQvbMyfas" className="main-img" alt="location-img" />
<div className="tags-colum">
   <div className='gp1'>
   <GrLocation />
    <p>JAPAN</p>
    <p className="underline-text">View on Google Maps</p>
     </div> 
    <div className="container-text">
        <h1>Mount Fuji</h1>
    </div>
</div>

  .tags-colum {
    display: flex;
    align-items: flex-start;
    margin: 20px 20px;
    flex-direction: column;
  }
    .gp1 {
    display: flex;
    align-items: center;
  }

here is an example https://codesandbox.io/s/homepage-forked-g18lgm?file=/public/index.html:56-126

or you can completely remove the display flex from the tags-colum