How to make all children items the same height in the flexbox, as the one that changes its height?

Question

This is how my problem looks like : https://ibb.co/x7QbBvY. It happens with every rectangle while resizing after certain breakpoints. Whole row is flexbox, it is separated in next two flexboxes that again contains 2 flexboxes. All children elements have height: 100%.

I managed to make this work easily with bootstrap row and column, but I wanted to make this now with only css. The only 2 things that came to my mind was to make few media queries and just change heights but it seems very inefficient. The second one is with using JS to change children sizes to the tallest one but this too seems inefficient. Children changes sizes because of

tags length in them.

<div class="mainDiv">
    <div class="row-first">
        <div class="two-statPill">
            <div class="statPill">
                <div class="pill-left">
                    <span>Highest expense</span>
                    <p class="pillAmount">@Model.PillsStats[0].AmountInt$</>
                </div>
                <div class="pill-right">
                    <p>@Model.PillsStats[0].Category</p>
                    <p>@Model.PillsStats[0].DatetimeString</p>
                    <p>@Model.PillsStats[0].Percentage% of @Model.CirclesStats[0].SumLast30Days$</p>
                </div>
            </div>
            <div class="statPill">
                <div class="pill-left">
                    <span>Last expense</span>
                    <p class="pillAmount">@Model.PillsStats[1].AmountInt$</p>
                </div>
                <div class="pill-right">
                    <p>@Model.PillsStats[1].Category</p>
                    <p>@Model.PillsStats[1].DatetimeString</p>
                    <input id="percentageArrowValue" type="hidden" value="@Model.PillsStats[1].Percentage" />
                    <p style="text-align:center;"><i id="arrowUp" hidden class="fas fa-arrow-up"></i><i id="arrowDown" hidden class="fas fa-arrow-down"></i><span id="arrowPercentage"> @Model.PillsStats[1].Percentage% </span><span> average</span></p>
                </div>
            </div>
        </div>
        <div class="two-statPill">
            <div class="statPill">
                <div class="pill-left">
                    <span>Lowest expense</span>
                    <p class="pillAmount">@Model.PillsStats[2].AmountInt$</p>
                </div>
                <div class="pill-right">
                    <p>@Model.PillsStats[2].Category</p>
                    <p>@Model.PillsStats[2].DatetimeString</p>
                    <p>@Model.PillsStats[2].Percentage% of @Model.CirclesStats[0].SumLast30Days$</p>
                </div>
            </div>
            <div class="statPill">
                <div class="pill-left">
                    <span>Lowest expense</span>
                    <p class="pillAmount">@Model.PillsStats[2].AmountInt$</p>
                </div>
                <div class="pill-right">
                    <p>@Model.PillsStats[2].Category</p>
                    <p>@Model.PillsStats[2].DatetimeString</p>
                    <p>@Model.PillsStats[2].Percentage% of @Model.CirclesStats[0].SumLast30Days$</p>
                </div>
            </div>
        </div>
     </div>
  </div>

CSS

.mainDiv {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.row-first {
    display: flex;
    align-items: center;
}
.statPill {
    border: 3px solid var(--text-primary);
    border-radius: 5px;
    background-color: var(--bg-navbar);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 48%;
    height: 100%;
    min-width: 11rem;
    padding: 0.2rem;
    margin: 0;
}
.statPill p.pillAmount {
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0;
}
.pill-left {
  text-align: center;
}
.pill-right {
  text-align: center;
}
.pill-right p {
  margin: 5px 0;
}
.two-statPill {
  display: flex;
  height: 100%;
  width: 50%;
  align-items: center;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  height: 100%;
}

@media only screen and (max-width: 768px)
{
  .statPill {
    margin-bottom: 0.5rem;
    width: 100%;
  }
  .row-first {
    flex-direction: column;
  }
}
@media only screen and (max-width: 980px)
{
  .two-statPill {
    flex-direction: column;
    width: 100%;
  }
  .statPill {
    width: 98%;
    margin: 0.2rem 0;
  }
}

Answer 1

by making the css property align-items set to stretch align-items:stretch , which is the default value of that property and if the flex direction is column just set the width of the child element to 100%, and if the direction is row set height of child to 100%