product-preview-card-component with flex-box

Hello @Asumpta-1, great work!

Here are some notes for improving the code:

• CSS Grid is best for the two-dimensional layouts with many elements that need to be precisely positioned relative to each other, while Flexbox is better for one-dimensional or single-line layouts where you just need to space a bunch of elements a certain way. So in case of the card in the challenge, it's better to use CSS Grid like the following

.your-container-div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 600px;
}

This will align the product image next to the details directly, making the code better and easier and It will also help us in making the component responsive by converting the layout from two columns to one column through media query, like this:

@media(max-width:600px) {
  .your-container-div {
    grid-template-columns: 1fr;
  }
}

• Regarding the product image It is better to use the <picture> element with <source> tags to make the product image responsive where based on your screen width, the appropriate image will be loaded instead of the two <img> elements.

<picture>
  <source
    srcset="images/image-product-mobile.jpg"
    media="(max-width: 600px)"
  />
  <source
    srcset="images/image-product-desktop.jpg"
    media="(min-width: 601px)"
  />
  <img src="images/image-product-desktop.jpg"/>
</picture>

Best wishes to you!