title: I'm trying to replicate this figma design
body: <p>Hey I'm new into CSS but I dont know how to make this work. Please help me on how to make this work.</p>
  <p><a href="https://i.stack.imgur.com/ZxzHR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZxzHR.png" alt="Desired outcome" /></a></p>
  <p>The desired outcome.</p>
  <p><a href="https://i.stack.imgur.com/IfcjS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IfcjS.png" alt="My outcome" /></a></p>
  <p>My outcome.</p>
  <p>The problem is how to make the heading come under the location tags. like in the figma design?</p>
  <p>Here is the HTML.</p>
  <pre><code>import { GrLocation } from &quot;react-icons/gr&quot;
  &lt;div className=&quot;container&quot;&gt;
          &lt;img src=&quot;https://source.unsplash.com/WLxQvbMyfas&quot; className=&quot;main-img&quot; alt=&quot;location-img&quot; /&gt;
          &lt;div className=&quot;tags-colum&quot;&gt;
              &lt;GrLocation /&gt;
              &lt;p&gt;JAPAN&lt;/p&gt;
              &lt;p className=&quot;underline-text&quot;&gt;View on Google Maps&lt;/p&gt;
              &lt;div className=&quot;container-text&quot;&gt;
                  &lt;h1&gt;Mount Fuji&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Here is the CSS.</p>
  <pre><code>.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;
  }
  </code></pre>