All solutions

I did enjoy creating this component, the only problem I had was the view icon svg with the cyan background-color. I managed to implement it through trial and error even though I know I have done it incorrectly as when changing the zoom of the page the svg background changes size. Any help would be greatly appreciated :)

I struggled to begin with implementing the main background-color as i thought the Main element would auto resize the the max-width of the widest child and couldn't think why I had so much whitespace when I changed the background-color to white... Yeah my brain was running slow, so I put everything inside a container and messed with the margins which corrected that for me.

My main difficulties was getting the text to sit the same as the designs in the challenge, so I tried my best to get it as close as possible and I had trouble sorting out the design layout until I found out that its best to always start with the smallest viewport and work your way up from there.

I found it difficult to align the current price and old price design until I found out that it would be easy by putting the elements in a table data cell and adding display : table-cell; to the stylesheet.

I found removing the whitespace from the main element originally to make the design look more or less identical to the preview, but messing with max-width percentages on the main and image element fixed that for me.