Let's explore the power of flexbox by creating a shop card with a product image, some description, and the price. By default, all the elements are stacked in a column, one below the other. However, our goal is to change this behavior using flexbox.

Task

Consider the following HTML structure:

html

The task is to modify the CSS to achieve the following:

• Identify the parent element containing both the product image (img tag with the product-image class) and product information (div tag with the product-info class).

• Apply flexbox to the identified parent element (the div tag with the shopping-card class).

• Vertically center the items within the shopping card.

• Apply display: flex; to the parent element with the class shopping-card.

• The default flex direction is row, so there is no need to change the value of the flex-direction property.

• To center items vertically, use align-items: center;.