I need to make my text adapt on a Card in React

Question

I'm trying to make the text at the bottom of the cards (number of viewers and video Time) always be at the bottom whether there are one or two lines of text above it.

This shows my issue:

React code:

import React from 'react'
import'./Cards.css'


export const Cards = ({streamer, title, avatar, description}) => {
  return (
    <>
    <div className="card-container">
      <img src={streamer}
      alt='Card Image'
      className="card-img"
      />
      <h2 className="card-title">{title}</h2>
        <img className="card-profileImg" src={avatar} />
      <p className="card-description">
        {description}
      </p>
    </div>
    </> 
  )
}

export default Cards

CSS

.card-container {
    width: 30rem;
    border-radius: 0 0 2rem 2rem;
    box-shadow: 0px 10px 8px #999;
    display: flex;
    flex-direction: column;
    margin: 0.5rem;
    color: white;
    background-color: #3473EC;
    height: 275px;
    margin-left: 40px;
    margin-bottom: 30px;
    
    
}

.card-img {
    width: 98.75%;
    border: 3px solid #ff636d;
    border-bottom: 0;
    height: 175px;
  
}

.card-title {
   margin-left: 6rem;
   margin-top: 0.75rem;
   justify-content: center;
   align-items: center;

}

.card-description {
    font-size: 11px;
    margin-left: 6rem;
    margin-top: -2px;
    justify-content: flex-end;
    position: bottom;
    
}

.card-profileImg {
    object-fit: contain;
    margin-right: 5px;
    width: 60px;
    border-radius: 50%;
    margin-top: -65px;
    margin-left: 10px;
    border: 4px solid #FFF;
}

Answer 1

Try using this for your cards css:

position: absolute;  
bottom: 0;

In your CSS:

.card-container {
    width: 30rem;
    border-radius: 0 0 2rem 2rem;
    box-shadow: 0px 10px 8px #999;
    margin: 0.5rem;
    color: white;
    background-color: #3473EC;
    height: 275px;
    margin-left: 40px;
    margin-bottom: 30px;
    position: relative; /* took out display: flex; added relative positioning  */
}

.card-description {
    font-size: 11px;
    margin-left: 6rem;
    margin-top: -2px;
    position: absolute;
    bottom: 5px; /* Or whatever distance looks good */
}