Struggling with flexbox column and can't find a solution online!
The problem: I have a full-height flex-column on the right side of my viewport with two elements (headset icon and hangup button). Trying to vertically align them - first element at top right corner, second element at center right. The issue is that using flex-column makes it impossible to use align-self-center for the second element as it centers it on the x-axis instead of the y-axis.
Is this achievable with flexbox or do I need to position the centered element differently?
Using Bootstrap 4 flex classes for flexbox implementation.
Example code: https://jsfiddle.net/mv1e7py0/18/
<div class="flex-container flex-column main-containere video-container">
<div class="communication-controls d-flex justify-content-between">
<div class="left-controls d-flex flex-column justify-content-between">
<button class="chat-toggle">
Chat
<div class="indicator bg-red"></div>
</button>
<button class="mic-toggle">
Mic
</button>
</div>
<div class="right-controls d-flex flex-column justify-content-between">
<button class="speaker-toggle">
Headset
</button>
<button class="dismiss-call red align-self-center">
<span>Hang up</span>
</button>
</div>
</div>
</div>
Desired outcome: