Center a line vertically regarding the remaining vertical space - html

Question

I don't really know how to put words on that but if you look at this fiddle, I'd like the "small value" line to be vertically centered in its space.
What I call its space is what's not occupied by "Title". I tried to set its line-height to 3em but it didn't help.
HTML
<div id="parent">
<div class="child">
<div class="title">
Title
</div>
<div class="value big">
Big value
</div>
</div>
<div class="child">
<div class="title">
Title
</div>
<div class="value">
Small value
</div>
</div>
</div>
CSS
#parent {
box-sizing: border-box;
max-height: 100%;
display: flex;
flex-direction: row;
place-content: stretch center;
align-items: stretch;
}
.child {
margin: 0 10px;
box-sizing: border-box;
padding: 10px;
flex: 0 0 auto;
box-sizing: border-box;
max-width: none;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
.child .title {
font-size: 1.5em;
color: grey;
}
.child .value {
font-size: 1.5em;
color: black;
}
.value.big {
font-size: 3em;
}

Answer 1

You can make .child a flex container.
Then to center the value, add margin: auto to .value
fiddle
#parent {
box-sizing: border-box;
max-height: 100%;
display: flex;
flex-direction: row;
place-content: stretch center;
align-items: stretch;
}
.child {
margin: 0 10px;
box-sizing: border-box;
padding: 10px;
flex: 0 0 auto;
box-sizing: border-box;
max-width: none;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column;
}
.child .title {
font-size: 1.5em;
color: grey;
}
.child .value {
font-size: 1.5em;
color: black;
margin: auto;
}
.value.big {
font-size: 3em;
}
<div id="parent">
<div class="child">
<div class="title">
Title
</div>
<div class="value big">
Big value
</div>
</div>
<div class="child">
<div class="title">
Title
</div>
<div class="value">
Small value
</div>
</div>
</div>