Order card summary

👾Hello @ravitejalakkoju, Congratulations on completing this challenge!

Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 340px will not grow or shrink because the size will be ever the same, but a container with max-width: 340px or min-width: 340px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

To make your solution even better and more responsive, you can create a media query to break the elements in the pricing section after width: 350px and make every content in a different row, saving space for low resolution devices.

@media (max-width: 350px) {
.order__plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    flex-direction: column;
}
}

✌️ I hope this helps you and happy coding!