NFT preview card component

Hi! I looked on to your solution using the browser's dev tools and I find that you assigned display: inline-block to your parent div small-eth and days. The display property is not inherited by its children that's why the icon and text doesn't go side-by-side.

To fix that you can add the display: inline-block to your child elements like this:

.small-eth p,
.days p {
    display: inline-block;
}

and you could reduce the padding on the .days p { padding: 95px } to .days { padding-left: 67px px;} .

Hope this helps~

Hello, Subham.

This is a good attempt.

To align the logos with the text, try using display: flex; on .small-eth instead of display: inline-block;.

This makes the logo and eth text flex items that will be positioned side by side. You can then use the gap property or add a margin to one of the flex items to increase/decrease the space between them.

Here's a sample of what the code could look like.

.small-eth {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 0.75em;
}

The same can be repeated for the clock icon and the text.

Here's a helpful article on flexbox if you're still confused about how to use it.

Try it, and let me know how it goes.

I hope this helps.