How to make div (inside another div) horizontally and vertically align - html

Question

I have 3 divs which are horizontally aligned (aqua color). Inside each div, there are two divs (red and black one).
What I am trying to do is, align the black divs horizontally regardless of the red div. The css for the black div is
.black-div {
width: 100%;
height: 45px;
max-width: 235px;
display: inline-block;
color: #33244a;
font-size: 16px;
text-transform: uppercase;
font-weight: normal;
text-align: center;
line-height: 43px;
border: 2px dashed #d5d1d8;
border-radius: 6px;
box-sizing: border-box;
}
Output will something like this
I am not good at all in css. I have tried using position: fixed / absolute but no luck.

Answer 1

Try it.
Use div and min-height.
section{
display: inline-block;
border: 1px solid red;
width: 100px;
}
.textarea-wrap{
overflow: hidden;
min-height: 200px;
}
.textarea-wrap > textarea{
width: 100%;
resize: none;
}
.red{
background-color: red;
}
<div>
<section>
<div class="textarea-wrap">
<textarea rows="3">12312312</textarea>
</div>
<div class="red">
red
</div>
</section>
<section>
<div class="textarea-wrap">
<textarea rows="10">12312312</textarea>
</div>
<div class="red">
red
</div>
</section>
<section>
<div class="textarea-wrap">
<textarea rows="6">12312312</textarea>
</div>
<div class="red">
red
</div>
</section>
</div>

Answer 2

You should use table to make it more manageable, or use absolute positioning on the black div so you can position them measure from the bottom of the blue div.

Answer 3

There may be a solution without the spacer. Im looking for it :)
found solution without spacer justify-content: space-between;
.wrapper {
display: flex;
flex-direction: row; /* flex in a row inside (make columns .col) */
}
.col {
display: flex;
flex-direction: column; /* flex in a column inside */
justify-content: space-between; /* since the elements must not grow, fill the space between them */
flex: 1 1 100px; /* grow and shrink of col allowed to fill row evenly starting at 100px*/
margin: 5px;
border: 3px solid black;
background-color: aqua;
}
.red {
flex: 0 1 auto; /* no vertical (col) growing (so it does not expand vertically) */
border: 3px solid black;
border-radius: 10px;
background-color: red;
margin: 5px;
padding: 10px;
}
.black {
background-color: black;
color: white;
margin: 5px;
padding: 10px;
display: block;
flex: 0 1 auto; /* no growing allowed */
}
.resize {
overflow: hidden;
resize: vertical;
}
<div class='wrapper'>
<div class='col'>
<div class='red'>Some wide wide wide wide wide wide Text</div>
<div class='black'>Footer</div>
</div>
<div class='col'>
<div class='red'>Some<br/>much<br/>longer<br/>Text</div>
<div class='black'>Footer</div>
</div>
<div class='col'>
<div class='red resize'>Some Text<br><b><u>Resize me!</u></b></div>
<div class='black'>Footer</div>
</div>
</div>
Edit removed spacer div
Edit2 added css commenting for easier understanding