'As seen in the image, create two responsive DIVs with space between them

To further understand my demand, click on this link and look at the image.

I'm working on a codewell challenge and I'm stuck on this portion. I can't make an even space between them, and the images are overlapping.

.website {
  display: flex;
  justify-content: space-between;
}

.arrow {
  display: inline-block;
  width: 1rem;
}
<div class="website">
  <div class="spense">
    <img id="spense" src="./Assets/Spense.png" alt="spense">
    <h3>Spense.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
    Rethinking the way writers get paid, an open resource platform <br> design to help writers focus more on writing, and less on <br> when and how they'll get paid, Projects in collaboration with <br> Codewell.cc
  </div>
  <div class="yelp">
    <img id="yelp" src="./Assets/YelpCamp.png" alt="YelpCamp">
    <h3>YelpCamp.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
    Allowing backpack travelers to perfectly plan their trip <br> through an open-source platform similar to TripAdvisor. With <br>over 1m MAU, YelpCamp has been the crowd's favorite in <br>2021.
  </div>
</div>
htmlcssresponsive-designmobile-website


Solution 1:[1]

You should specify a width for divs:

.website {
  display: flex;
  justify-content: space-around;
}

.arrow {
  display: inline-block;
  width: 1rem;
}
#spense,#yelp{
  width: 100%;
}
.spense,.yelp{
   width: 30%;
}
<div class="website">
  <div class="spense">
    <img id="spense" src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg" alt="spense">
    <h3>Spense.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
    Rethinking the way writers get paid, an open resource platform <br> design to help writers focus more on writing, and less on <br> when and how they'll get paid, Projects in collaboration with <br> Codewell.cc
  </div>
  <div class="yelp">
    <img id="yelp" src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg" alt="YelpCamp">
    <h3>YelpCamp.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
    Allowing backpack travelers to perfectly plan their trip <br> through an open-source platform similar to TripAdvisor. With <br>over 1m MAU, YelpCamp has been the crowd's favorite in <br>2021.
  </div>
</div>

Solution 2:[2]

you can use , justify content to space-evenly instead! and that should work

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Vinit Kasture

Related Questions