Center inner DIVs vertically depending on the highest sibling - html

Question

I have an outer DIV (4) and three inner DIVs (1-3). I don't care about width here. It's all about height and vertical centering. I want the outer DIV (4) to get the height of the highest inner DIV (2 in row A). More importantly I want the other inner DIVs (1 and 3 in row A) to get centered vertically (in relation to the height of the outer DIV that has the same height as the highest inner DIV).
The contents of the DIVs are dynamic (compare row A and B) therefore I don't know which inner DIV will be the highest. Until now I used a jQuery solution that set the margin-top of the smaller DIVs (red marks) but I would like to solve it in plain CSS now.

Answer 1

This is easy using a flexbox - the property align-items: center produces the desired result - see a demo below:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.wrapper > div {
border: 1px solid;
}
<div class="wrapper">
<div class="one">Some text here</div>
<div class="two">
There is a lot of text here
<br>There is a lot of text here
<br>There is a lot of text here
<br>
</div>
<div class="three">Some
<br>text</div>
</div>

Answer 2

.outera {
border:solid 1px #333;
}
.outera div {
width:20px;
border-radius: 16px;
background-color:#212121;
margin:10px;
display:inline-block;
vertical-align: middle;
}
.outera .a1 {
height:20px;
}
.outera .a2 {
height:80px;
}
.outera .a3 {
height:50px;
}
<div class='outera'>
<div class='a1'></div>
<div class='a2'></div>
<div class='a3'></div>
</div>

Answer 3

You can use CSS Flexbox.
In the below snippet I've used display: inline-flex;. Have a look at the snippet below:
body {
padding: 20px;
}
.outer {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #000;
}
.inner {}
.a .element {
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
}
.b .element {
width: 20px;
height: 50px;
border-radius: 50%;
background: green;
}
.c .element {
width: 20px;
height: 30px;
border-radius: 50%;
background: blue;
}
<div class="outer">
<div class="inner a">
<div class="element"></div>
</div>
<div class="inner b">
<div class="element"></div>
</div>
<div class="inner c">
<div class="element"></div>
</div>
</div>
Hope this helps!