Как верстать подобный текст в карточках правильно?

Question

[Виктория]

Answer 1

[Glao]

Можно воспользоваться псевдоэлементами:

https://codepen.io/wutwutwut/pen/WNjpbXb

Answer 2

[Владимир Коротенко]

https://jsfiddle.net/vkorotenko/zapn0duc/

Как то так

Answer 3

[Александр]

Можно как то так, поиграйте только с top и margin, ну и соответственно задайте размеры для шрифтов

<div class="price">
    <sup>$</sup> 00 <sub>per month</sub>
</div>

.price {
	display: flex; align-items: baseline; justify-content: center;
}
.price sup {
	position: relative; top: -10px; margin-right: 2px;
}
.price sub {
	position: relative; top: -2px; margin-left: 5px;
}