Make a field grow upwards

[scoubidou75]

Hi everyone!

I’m still learning HTML/CSS and making some progress but I’m having a headache with a simple issue:

I have an “Extra” field that could be 1 line, 2 lines or even 5 lines, and I would like that no matter how long it is, that the last line (or the only one sometimes) stick at the position, more precisely at the bottom of my card. Currently, I managed to make a line first line staying fixed, meaning that whenever the number of lines grows, the whole paragraph will go down and thus get out of the card.

I hope my explanations were clear? I put a picture so you can see how it looks now.

So as you can see, the final result I’m trying to achieve is to have almost zero blank between the last line and the bottom edge of the card, with some code that will say don’t go further down that this line, just go upwards.

PS: I know my CSS is a mess but I’m planning to make a good cleaning later on

<div style="display:flex">
  <img src="" style="display:block !important; margin:auto">
</div>
/* center #qa inside .card (the body)  */

.card {
  font-size: 1.2rem;
  text-align: center;
  background-color: #8ab0ae;
  --text-fg: #575e6f;
  --text-bg: rgba(255, 255, 255, .5);
  --kard-bg: #fed6bc;
  padding: 2rem 8rem;
  background: #3D3847;
  box-shadow: rgba(0, 0, 0, 0.30) 0px 0px 25px 4px;
  border-radius: 15px;
  min-height: 300px;
  max-height: 3000px;
  min-width: 350px;
  display: flex;
  justify-content: center; /* Centrer l'ensemble des éléments horizontalement */
  align-items: center; /* Centrer l'ensemble des éléments verticalement */
}


/* make #qa (child of .card) centerable */
/* and left-aligned */
#qa {
  min-width: 40%;
  display: inline-block;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  display: inline-block;
    
}

.kard {
  padding: 2rem 8rem; /* Increasing the padding to make the background square bigger */
  background: #3D3847;
  box-shadow: rgba(0, 0, 0, 0.30) 0px 0px 25px 4px;
  border-radius: 15px;
  min-height: 350px;
  max-height: 350px;
	min-width:  370px;
  text-align: center;

}


.textbox {
  display: inline-block;
  font-size: 40px;
  text-align: left;
  color: white;
  background: var(--text-bg);
  height: 10px;
  margin-top: 50px; /* Ajout d'une marge en haut */
  margin-bottom: -50px; /* Ajout d'une marge en bas */
}
.paraback {
  display: flex;
	justify-content: center;
	align-items: center; 
	font-size: 25px;
  text-align: center;
  color: #FFDAB9;
	height: 200px;
	width: 80px;
 width: 100%; /* Use full width of the container */
  max-width: 480px; /* Limit maximum width */
  margin: auto; /* Center horizontally */

}

.parextra {
  display: inline-block;
  font-size: 15px;
  font-style: italic;
  text-align: justify;
  color: #008080;
  height: 0px;
  margin-top: -70px; /* Ajout d'une marge négative en haut */
}


/* for landscape orientation */
/* only use part of the available width */

@media (min-width: 500px) {
  #qa {
    min-width: 500px;
    max-width: 500px;

  font-family: arial;
 */
  }
........

#qa .kard {
  position: relative;
}

#qa .kard .parextra {
 	position: fixed;
  bottom: -60px;
  right: 50%; /* Align to the left */
  transform: translateX(50%); /* Adjust transform accordingly */
  display: block;
  font-size: 15px;
  font-style: italic;
  text-align: left; /* Adjust the text alignment as needed */
  color: ; /* Ajoutez la couleur souhaitée ici */
  height: 0x; /* Increase the height for more room */
margin: -80px;; /* Center the content horizontally */
  width: 90%; /* Adjust the width as needed */
	 margin-bottom: 170px
}


#qa .kard .paraback {
  display: none; /* Hide the "Back" content on the front side */
}

.backtemplate #qa .kard .paraback {
  display: block; /* Show the "Back" content on the back side */
}

.expression {
font-weight: bold;
background: #8FBC8F;
color: black;