Detallando estilos en tarjetas de planes

Para poner en arriba el $ agregar lo siguiente

.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: text-top;
}```

Hola a todos!
Decidí agregar el signo $ a través de un pseudo elemento creado con ::before (utilicé ::before porque el símbolo está _antes _del número).

.price-card .price-card__planPrice {
    font-size: 5.2rem;
    line-height: 6.3rem;
    font-weight: bold;
    position: relative; /*para qeu el símbolo se posicione en relación al número*/
}
.price-card .price-card__planPrice::before {
    position: absolute;
    top: 20%;
    left: calc(50% - 45px);
    content: '$';
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;  /*La altura de la línea del texto es igual a la altura del texto (sería algo así como sacarle el padding  top y bottom a una caja)*/
}

Este es el resultado:

¿Qué les parece?

La primera solución que se me ocurrió fue usar la posición absoluta y colocar un top y left.
Al principio puse ⚠ left: -60px; pero al hacer más grande la resolución de la página esto se corría de lugar por lo cual no era viable. Entonces usé el siguiente código que nos enseño Diego en las clases anteriores.

.plan-card__price {
    position: relative;
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
    color: black;
}

.plan-card__price span {
    position: absolute;
    top: -7px;
    left: calc(50% - 40px);
    font-size: 1.2rem;
    font-weight: 300;
}

Usando calc podemos mover el elemento desde la línea central del elemento, y como la línea central nunca va a variar porque el centro siempre será el centro, entonces no se mueve del lugar a pesar de cambiar el tamaño de la página. En cambio, tomando como referencia los costados como left o right porque estos pueden variar al hacer más grande la pantalla.

Otra manera de centrar de manera vertical el texto de ‘Recomendado’ es usando line-height:

.recommended {
	line-height: 31px; /* El mismo valor que se asigna a height */
} 

Yo lo que hice fué usar la etiqueta de HTML5 
Así

<sup><span>$</span></sup>

Este fue el código que utilice para posicionar la etiqueta de span 😃

Así lo hice con Flex

.card-planes__precio {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    font: bold 5.2rem/6rem 'Inter', 'sans serif';
    letter-spacing: -.5rem;
    color: #000000;
}

.card-planes__precio span {
    margin-right: 7px;
    padding-top: 9px;
    font: 500 1.2rem/1.45rem 'Inter', 'sans serif';
    color: #363636;
}

Asi lo realice yo 😃

<.plan-card__price span {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 27px; /*para posicionar un elemento en la parte de arriba de un texto*/
    margin-right: -8px;
}> 

Si por alguna razon, los estilos no les salen en los parrafos, es porque esta interfiriendo la parte de

.plans--title p {
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #757575;
}

interfieren con los estilos marcados hace dos videos, les recomiendo que a la parte de ese parrafo, le pongan una clase extra, que aumente la especificidad.

Una de las formas mas rapidas de posionar el texto de recomendado, aprovechando que ya tenemos un text-align: center aplicado a toda la seccion, es simplemente darle un display: inline-block, y position: relative con un bottom: 7.5px (la mitad del alto del parrafo), para que lo empuje desde su misma posicion hacia arriba.

.plans-container__card>p {
    display: inline-block;
    position: relative;
    bottom: 7.5px;
}

• Y agregarle los demas estilos que son los mismos, backround, padding, etc.

Ya hice el botón y subí el signo de dolar. Lo hice con position: relative; y position: absolute;. Veo que diego prefiere centrar usando padding, yo uso flexbox.

Este es el código:

Esta es mi solución al problema:

.plan-card--price {
  position: relative;
  padding: 5px 0;
  font-size: 5.2rem;
  font-weight: bold;
  color: var(--black)
}

.plan-card--price span {
  font-size: 1.2rem;
  font-weight: 300;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  transform: translateX(-40px)
}

No sé si me compliqué mucho pero así me funcionó 😅🤪:

.main-plans-container .plans-container--slider .plans-container--card .plan-info-container .plan-card--price
{
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5rem;
    color: var(--black);
    position: relative;
}
.main-plans-container .plans-container--slider .plans-container--card .plan-info-container .plan-card--price span
{
    font-size: 1.2rem;
    font-weight: 300;
    position: absolute;
    top: -6px;
    left: calc(50% - 40px);
}

Espero le sirva a alguien mi aporte.
Lo que pasa es que intente de varias maneras el reto(ubicar el $ en la parte superior).

1. • una fue usando** position:relative **en el contenedor padre y **position:absolute **en el contenedor hijo(el del span)

   • El problema de ese es si quieres aumentar el número a las de 99, se sobrepone con el signo $

2. Fue intentando usar display:flex;

   • Este funciono muy bien, sin embargo, se centraba tanto el $ como el 99, y en Figma se puede ver que el 99 es el que esta en medio y el $ a un costado, no los dos centrados juntos.

… Intente otros métodos más; sin embargo, mi solución fue la siguiente

Así que mi solución fue la siguiente

• En el span usé vertical-align: top;, lo que hace que se ponga en la parte superior

• y para que quede centrado al contenedor padre le agregue ** position: relative;** y le reste con left:-7px; el grosor del signo $

• Luego ya hice varias pruebas, números muchos más grandes y siempre quedaba centrado y con el signo a un lado

.plan-card--price{
  padding:5px 0;
  font-size: 5.2rem;
  font-weight: bold;
  line-height: 6.3rem;
  font-family: "Inter",sans-serif;
  color:black;
  position: relative;
  left:-7px;
}



.plan-card--price span{
  vertical-align: top;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5rem;
  
  
}

Compañeros yo utilicé el cal() y un absolute para poner el signo $ arriba del número:

.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    position: absolute;
    left: calc(50% - 40px);
    top: calc(50% - 90px);
}

Si se hubiese usado Flexbox con flex-direction row el signo $ hubiese quedado bien alineado

Hice el centrado de otra forma :

  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;

También puse como width el máximo del contenido

width: max-content;

La forma que lo resolvi fue la siguiente

.plan-card--price span {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 300;
  right: calc(50% + 35px);
  bottom: calc(50% + 25px); 
}

Yo lo movi hacia arriba asi:

.plans-container--card .plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 2.5rem; /* Mover el $ arriba*/
}```

Muchachos, creo que la mejor forma es utilizas el pseudoelemento “::before”, Ya que se va a acomodar sin importar a la cantidad de cifras que pueda tener el precio en la tarjeta. Aquí les dejo una foto y el código

Mi solucion

.plan-card--price span {
    position:absolute;
    margin: -10px;
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: -15px;
}

Los tres planes quedaron listos.

Se veía muy separado los numeros y agregue un letter-spacing

.change-card .price {
    padding: 6px 0;
    font-size: 5.4rem;
    font-weight: 700;
    line-height: 6.2rem;
    letter-spacing: -4px;
    color: var(--black);
}

.change-card .price span {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 4rem;
    vertical-align: text-top;
}

.plan-card-price span {
font-size: 1.2rem;
font-weight: 300;
vertical-align: text-top;
}

Mi avance :

.main__plans--cards {
    position: relative;
    width: 70%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 50px auto 0;
    padding: 0 15px;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(89 73 30 / 0.16);
}

.card--title {
    position: absolute;
    /* padding: 10px; */
    width: 120px;
    height: 31px;
    padding: 8px;
    top: -15px;
    left: calc(50% - 60px);
    background-color: var(--bitcoin-orange);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4rem;
    color:var(--white);
    text-align: center;
}

.card__info-title {
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: black;
}

.card__price {
    position: relative;
    right: 8px;
    padding: 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 5.2rem;
    font-weight: 700;
    line-height: 6.3rem;
}
.card__price sup {
    position: relative;
    top: -13px;
    left: 10px;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4rem;
}

.card__saving {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4rem;
    text-align: center;
    color: var(--dark-grey);
}

Para poner el $ arribar puse este código:

<code> 
.plan-card--price span{
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 30px;
    padding: 10px;
}

Espero que mi comentario pueda ayudar.

Para posicionar el $ es muy facil, lo hice con position relative y le coloque un bottom de 28px

.plan-card-price span {
    font-size: 1.2rem;
    font-weight: 300;
    position: relative;
    bottom: 28px;

2 soluciones que encontré:

Usando Position

.plans-card-body__price {
    position: relative;
}

.plans-card-body__dollar {
    position: absolute;
    top: -12px;
    left: calc(50% - 45px);

    font-size: 1.2rem;
    font-weight: 300;
}

Usando vertical align

.plans-card-body__dollar {
    vertical-align: 28px;

    font-size: 1.2rem;
    font-weight: 300;
}

Buenas noches envió imagen de como me quedo, verificando los demás comentarios evidencio que no utilizaron tantos “código” pero bueno lo quería intentar no soy para nada experta en el tema. de igual forma no se si así también esta bien. acepto comentarios. Gracias

Reto logrado!!! 💚💪🚀

Me pareció un reto interesante porque era posicionar una etiqueta span la cual no se muy bien como se comporta del todo por defecto. Intenté muchas cosas y finalmente se me ocurrió lo siguiente:

Coloqué position: absolute al span para luego jugar con las posiciones left y right, también le di un margin-top. A la etiqueta p que contiene el span le di un position: relative. Y de resto le agregué los demás estilos según el diseño en Figma.

Adjunto el código CSS

.plan-card--price {
  position: relative;
  padding: 5px 0;
  font-size: 5.2rem;
  font-weight: bold;
  line-height: 5.3rem;
  color: black;
}
.plan-card--price span {
  position: absolute;
  margin-top: 4px;
  left: 0;
  right: 80px;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: #363636;
}

Yo lo hice así 😅

.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    position: relative;
    top: -28px;
}

creo que lo mas fácil y obvio es usar

.plan-card--price span {
    vertical-align: top;
    font-size:1.2rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.plan-card--price {
    position: relative;
    padding: 5px 0;
    font-size: 5.2rem;
    line-height: 6.3rem;
    color: black
}

.plan-card--price span {
    position: absolute;
    left: calc(50% - 45px);
    bottom: 20px;
    font-size: 1.2rem;
    font-weight: 300;

}

Lo que me encantan de las clases de este profesor es que las respuestas a los retos salen solas si prestas atencion!

.plan-card--price{
  position: relative;/*para poder posicionar el $*/
  padding: 5px 0;
  font-size: 5.2rem;
  font-weight: bold;
  line-height: 5.3rem;
  color: black;
}

.plan-card--price span{
  position: absolute;
  top: -7px;
  left: calc(50% - 40px);
  font-size: 1.2rem;
  font-weight: 300;
}

/centrar boton/
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;

.plan-card--price

.plan-card--title

resultado intermedio

.recommed

Edición de style.css

La solución que desarrollé como respuesta al reto, está enfocada en aprovechar que a la clase plans-container–card se le había asignado el valor relative en la propiedad position:

Dado que esta clase es la asignada en HTML, al contenedor article que aloja toda esta sección:

Se puede utilizar la propiedad position con valor absolute, para ubicar los elementos hijos del contenedor mencionado, según el diseño planteado en Figma, tal y como se hizo con la clase recommended:

Teniendo en cuenta lo anterior, utilicé la propiedad position con valor absolute, asigné dimensiones a la etiqueta span y realicé el cálculo similar al realizado con la etiqueta p clase recommended, para poder ubicar el signo $ en el lugar que indica Figma, el cual debe quedar en la misma horizontal superior que forman los 2 dígitos del precio del plan. Estos estilos me quedaron así:

Posicione el $ de esta manera

.plan-card--price span{
    position: relative;
    top: -27px;
    left: 10px;
    font-size: 1.2rem;
    font-weight: 300;
}

Así fue como lo solucióne a ojo del buen cubero.

.plan-card--price span{
    position: absolute;
   font-size: 1.2rem;
  font-weight: 300;
  right: calc(50% + 40px);
  bottom: calc(50% - 20px); 
}

pequeño recordatorio:

al usar la función calc deben asegurarse que estén bien separados los números/variables del signo de la operación.

Mal:

left: calc(50%-60px);

Bien:

left: calc(50% - 60px);

Observé en el diseño que el “99” está más pegado y el signo “$” un poco alejado. Así que usé letter-spacing para acomodarlo.

.card-plan__price{
  letter-spacing: -4px;
/*El letter spacing de ambos corre el texto, sumando los dos letter spacing como valor del padding, hago que el texto se vuelva a centrar*/
  padding-right: 8px;
}

.card-plan__price span{
  letter-spacing: 4px;
}

Sin letter-spacing ni padding

Con letter-spacing y padding

Para saber cuál es el valor de “calc(50% - ?)” para que quede centrado es sacar el 50% del ancho total.
por ejemplo: 120px * 50 / 100 = 60px

“calc(50% - 60px)”

Seguimos avanzando ya falta poco

Trate de hacer sin ver las dos ultimas clases y vaya que me salio, aunque un poco diferente a lo que explico el profe diego pero lo bueno que no se rompen los estilos al agrandar, anteriormente me solia pasar seguido jeje.
Lo unico que revise aqui fue la alineacion del $ vertical

Usando <sup> en vez de <span> ;

.plan-card--price sup {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 25px;
}

Hola a todos:
Yo para el signo $ use la propiedad de position

.plan-card--price span{
    position: absolute;
    font-size: 1.2rem;
    font-weight: 300;
    top: 40px;
    left: 70px;
}

Hice lo siguiente:

.plan-card--price span{
    font-size: 1.2rem;
    font-weight: 500;
    margin-right: 4px;
    position: relative;
    top: -3rem;
}

Tal vez fue la solución más básica pero yo lo hice con Flexbox

.main-plan-cards .main-plan-price {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-top: 16px;
}

Con esto se centra el el contenido y el icono de dólar queda arriba, igualmente se puede usar flex-start en vez de stretch

hola, yo lo hice simple desde el html, cambie la etiqueta span por la etiqueta sup, que es superindice… no sera la gran solucion ni la mejor pero dije para que css si existe una etiqueta html para ello

<p class="plan-card--price"><sup>$ </sup>99</p> 

Aquí mi código, el calc si lo sabes usar ayuda bastante como dice Diego

.plan-card--price {
    position: relative;
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 6.3rem;
    color: black;
}
.plan-card--price span {
    position: absolute;
    height: 12px;
    top: -10px;
    left: calc(50% - 50px);
    font-size: 1.2rem;
    font-weight: 300;
}

.plan-card__price span{
    font-size: 1.2rem;
    font-weight: 500;
    vertical-align: 27px;
}

My code

¡Hola! Agregando la propiedad letter-spacing van a poder juntar los números ‘99’ 😃

.plan-card--price {
    letter-spacing: -0.4rem;
    padding: 5px 0;
    font-size: 5rem;
    font-weight: bold;
    color: #000;
}

Así va quedando

Para subir el ‘$’ usé:

.plan-card--price span{
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 27px;   
}

Luego, en el html le dí un espacio dentro del <span> para que se separe un poco el singo $. Antes le dí el espacio fuera del <span> y era mucho.

<p class="plan-card--price"><span>$ </span>99</p> 

Yo resolví el reto del ‘$’ así

.plan-card--price{
    position: relative;
    padding: 5px 0px;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
    color: var(--black);
}
.plan-card--price span{
    position: absolute;
    font-size: 1.2rem;
    font-weight: 300;
    left: calc(50% - 42px);
    bottom: 20px;
}
.plan-card--saving{
    font-size: 1.2rem;
    color: #757575;
}

Usando position relative y absolute.

a mi se me ocurrio esta solución y creo se ve bien, que opinan?

.plan-card--price {
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
    color: black;
}
.plan-card--price span{
    position: absolute;
    font-size: 1.2rem;
    font-weight: 300;
    margin: -10px;
}
.plan-card--saving {
    font-size: 1.2rem;
    color: #757575;
}

para poner el $ en su posición utilice lo siguiente:

.plan-card--price{
    position: relative;
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    color: black;
}

.plan-card--price span{
    position: absolute;
    font-size: 1.2rem;
    font-weight: 300;
    left: 30%;
    top: 20%;
}

.plan-card–price span{
font-size: 1.2rem;
font-weight: bold;
position: absolute;
left: calc(36%);
top: calc(14%);
}
Este si =)

Les recomiendo poner un letter-spacing para el espaciado entre caracteres

(Notan con en el diseño el numero 99 tiene menos espacio entre si)

y les dejo la solución de signo del $

main .plan-card--price {
    padding-top: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 6.3rem;
    color: black;
    font-family: var(--second-font);
    letter-spacing: -0.4rem;
}

main .plan-card--price span {
    position: relative;
    font-size: 1.2rem;
    top: -27px;
    left: -8px;
    font-family: var(--second-font);
}

Listo

👌

Hasta ahora voy así:
.

.

Para posicionarlo use

.plan-card--price {
  position: relative;
  padding: 5px 0;
  font-size: 5.2rem;
  font-weight: bold;
}
.plan-card--price span {
  position: absolute;
  top: 18px;
  left: 56px;
  font-size: 1.2rem;
  font-weight: 300;
}

Para posicionar el span, utilizando las flechas en el inspector de elementos para irlo moviendo poco a poco hasta que vemos que llega a la posición que queremos

.plan-card__price span {
    vertical-align: 25px;
}

Para poner el signo $ arriba del precio. Tenemos que posicionarlo y luego con top moverlo.

.plan-card--price span {
    position: relative;
    top: -22px;
    font-size: 1.2rem;
    font-weight: 300;
}```

excelente Diego

Por alguna extraña razón para aplicar los estilos de “plan-card–price” no me deja hacerlo, si me voy a las herramietas de desarrollador de Chrome solamente me dice que esta heredando o que le da prioridad a los estilos de la etiqueta P de ".main-exchange-container p "

Para poder aplicar los estilos tuve que caer en la mala practica de un !Important… alguien sabe que pudo haber pasado?

agregué esto para subir el signo de precio

    position: relative;
    bottom: 27px;

Esta es la forma en la que yo solucione el reto.

Decidi hacerlo con Absolute:

.plan-card--price {
  font-family: 'Inter', sans-serif;
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 6.3rem;
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--black);
  position: relative;
}
.plan-card--price span{
  font-size: 1.2rem;
  line-height: 1.45rem;
  position: absolute;
  top: 15px;
  left: calc(50% - 42px);
}

Aunque también se puede:

.plan-card--price span{
  font-size: 1.2rem;
  line-height: 1.45rem;
  vertical-align: top;
}

No sé si luego de algún tipo de problema o sea la mejor manera, pero para posicionar el “$” hice uso del position relative y medidas en top y left

.plan-card--price span{
	position:  relative;
	font-size: 1.2rem;
	font-weight: 300;
	top: -30px;
	left: 10px;
}

Creo que se les paso el detalle de la accesibilidad en el curso, debido a que si algún usuario decide cambiar el tamaño de fuente desde los ajustes del navegador la pagina comienza a presentar fallos en el diseño: el contenido se desborda de algunos elementos, en algunos corta el contenido por lo que se ve incompleto, etc.

Note que el precio estaba más a la derecha que lo que está mostrando el diseño original. Use position relative

.plan_card--price {
  position: relative;
  left: -7px;
  padding: 5px 0;
  font-family: "Inter", sans-serif;
  letter-spacing: -0.4rem;
  font-size: 5.2rem;
  font-weight: bold;
  line-height: 5.3rem;
  color: black;
}

Agrege el letter-spacing como esta en figma para que el 99 se vea mas junto…adicional el signo $ lo ajuste con ayuda de line-height y vertical-align

.plans-card--price{
    padding: 5px 0;
    font-weight: bold;
    font-size: 5.2rem;
    line-height: 6.3rem;
    color: var(--black);
    letter-spacing: -0.08em;
}

.plans-card--price span{
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 3.5rem;
    color: var(--black);
    vertical-align: top;
}

Yo le aplique el tipo de fuente Inter al precio y queda como el diseño de figma y se ve un poco mejor.
Saludos

Para posicionar el $ usé:

    position: absolute;
    top: 30px;
    left: 75px;

Yo coloque el signito de dólar de esta forma:

.plan-card--price {
    position: relative;
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: 700;
    color: var(--black);
    display: inline-block;
}

.plan-card--price span {
    position: absolute;
    top: 20px;
    left: -10px;
    font-size: 1.4rem;
    font-weight: 300;
}

.plan-card--price span{
    position: relative;
    font-size: 1.2rem;
    font-weight: 300;
    left: -5px;
    top: -30px;
  }

Lo hice de esta manera :

.plan-card--price{
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
    color: black;
    position: relative;

}

.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    position: absolute;
    top: -7px;
    left: calc(50% - 42px);
  
}```

.plan-card–price span{
font-size: 1.2rem;
font-weight: bold;
position: absolute;
left: calc(50% - 40px);
top: calc(50% - 90px);
}
Esta si =*

Aca hay otra variante

.plan-card–price span {
font-size: 1.2rem;
position: relative;
font-weight: 700;
top: -26px;
left: -3px;
}

Yo posicione el signo de “$” con position: absolute.
.
.

.plans-container-card .dollar-small {
    position: absolute;
    top: 70px;
    left: 71px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.5rem;
}```

Yo utilice 2.8rem ya que el dolar debe estar alineado a la altura del 99
.plan-card–price span {
font-size: 1.2rem;
font-weight: 300;
vertical-align: 2.8rem;
}

Hola PlatziNautas;

Este es mi solución para el reto del span:

Saludos!

si miran bien, el span tiene otro color, es el:
#363636

Para el $ yo he usado esto no se si será lo mas correcto

.plan-card--price{
    position: relative;
    padding:5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 6.3rem;
    color: black;
}
.plan-card--price span{
    position: absolute;
    font-size: 1.2rem;
    font-weight: 300;
    top: -5%;
    left: calc(50% - 40px);
}```

Yo lo hice de la siguiente manera. Que opinan?

<.plan-card--price span {
    position: relative;
    font-size: 1.2rem;
    font-weight: 300;
    bottom: 20px;
}>

Buen dia campeones.

Yo solamente agregué un position relative y lo empece a colocar con top y left:

.plan-card__price span {
    font-weight: 300;
    font-size: 1.2rem;
    position: relative;
    top: -27px;
    left: -2px;
}