How do you make the position: absolute; position: relative; stay together but have an auto height

I am trying to make profile cards in the style of Discord (latest design). When trying to show both the banner and a banner color it isn't aligned correctly. If anyone could help me, please?

Screenshot 1

Screenshot 2

To debug I tried to use CSS data selectors (\[data-??='true'\])

.preview-card.pfp[data-prem='True'] img {
  top: 85px;
}
.preview-card .pfp[data-prem='False'] img {
  top: 50px;
}

Yesm this will work but not for everything.

CodePudding user response：

I think you have a space missing. Try this maybe:

.preview-card .pfp[data-prem='True'] img {
  top: 85px;
}
.preview-card .pfp[data-prem='False'] img {
  top: 50px;
}

CodePudding user response：

Issue has been resolved!!!! thanks for the quick responses