All solutions

It looks almost perfect, but I have a problem when it's going from a laptop screen to phone. It looks fine as soon as it goes to phone pixel amount, but in between, the "add to cart" button is not aligned perfectly so it looks off. Wasn't sure how to fix that at this point. I made it better than it was by adding a div called "button container" and made it hold the div in place, but it wasn't as successful as I would've liked. If you can come up with solutions for that, that would be amazing, and I'll try to maybe repost and fix it. Also, I don't know how it looks on a bigger screen than a 14in laptop, so for all I know, it looks super wonky on a big screen. Sorry :(

I used one of the other solutions to help me figure out how to better round out the edges via flexbox, better padding after-the-fact that the container holding the image should've started as the same width by width:inherity, and I centered the content using justify-content:center on the box holding all the other content. Should be better now. Sizing wize, it was hard to gauge, though, so I sort of eyeballed it.

If anybody knows how to make the border-radius for the image the same as the div box I made holding the image and text, let me know because I can't really figure it out.