Change column height while maintaining CSS base

Question

I am having problems gradually increasing the columns. I want the result to be the same as the image below:

I tried to change the height of each one, only the base is increasing the width (which should not happen):

.growthInformations {
  border: solid red;
  display: flex;
  justify-content: space-around;
}

.growthInformations div h1,
.growth div h3,
.growth div p {
  color: white;
  margin: 10px 0 0 0;
}

.growthInformations div {
  background-color: blue;
  width: 160px;
  text-align: center;
}

.growthInformations div>p {
  background-color: green;
  height: 300px;
}

.growthInformations {
  border: solid red;
  display: flex;
  justify-content: space-around;
}

.growthInformations div h1,
.growth div h3,
.growth div p {
  color: white;
  margin: 10px 0 0 0;
}

.growthInformations div {
  background-color: blue;
  width: 160px;
  text-align: center;
}

.growthInformations div>p {
  background-color: green;
  height: 300px;
}

<div class="growthInformations">
  <div>
    <h1>$ 100</h1>
    <h3>100 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div>
    <h1>$ 150</h1>
    <h3>180 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div>
    <h1>$ 200</h1>
    <h3>260 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div>
    <h1>$ 250</h1>
    <h3>380 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div>
    <h1>$ 300</h1>
    <h3>420 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div>
    <h1>$ 350</h1>
    <h3>520 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Answer 1

Guy basically in the container pai you have to put a preset height, because the children will have a % the height of the father understands. In case I put the parent container with 600px. Then, still in the parent container, you have to put align-items: flex-end; This will align the children at the base of the container, regardless of height.

To finish using nth-child and height in % you do the "ladder"

.growthInformations div:nth-child(1) {
  height: 50%;
}

See how it looks:

Image code:

.growthInformations {
  border: solid red;
  display: flex;
  justify-content: space-around;
  height: 600px;
  align-items: flex-end;
}

.growthInformations div h1,
.growth div h3,
.growth div p {
  color: white;
  margin: 10px 0 0 0;
}

.growthInformations div {
  background-color: blue;
  width: 160px;
  text-align: center;
  height: 100%;
}

.growthInformations div:nth-child(1) {
  height: 50%;
}
.growthInformations div:nth-child(2) {
  height: 60%;
}
.growthInformations div:nth-child(3) {
  height: 70%;
}
.growthInformations div:nth-child(4) {
  height: 80%;
}
.growthInformations div:nth-child(5) {
  height: 90%;
}

.growthInformations div>p {
  background-color: green;
  /* height: 300px; */
}

<div class="growthInformations">
  <div>
    <h1>$ 100</h1>
    <h3>100 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div>
    <h1>$ 150</h1>
    <h3>180 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div>
    <h1>$ 200</h1>
    <h3>260 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div>
    <h1>$ 250</h1>
    <h3>380 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div>
    <h1>$ 300</h1>
    <h3>420 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div>
    <h1>$ 350</h1>
    <h3>520 + hours</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>