My design includes a row of Bootstrap buttons displayed horizontally. These buttons come in two sizes - medium and small, with the requirement that two small buttons should occupy the same vertical space as one medium button when stacked vertically.
To illustrate, here is an example of a medium button:
<a class="btn btn-lg top-buffer align-root half-width double-height btn-primary " id="WID020" href="#">
<div id="EL034">
<h6 class="align-bottom-left text-default ">MD. BTN</h6>
</div>
<div id="EL033">
<i class="fa align-center-center fa-car fa-2x text-default"></i>
</div>
</a>
Conversely, here are two small buttons placed within a btn-group-vertical:
<div class="btn-group-vertical ">
<div>
<a class="btn btn-lg top-buffer align-root quarter-width btn-danger" style="vertical-align: top; display: table-cell;" id="WID021" href="#">
<div id="EL040"><i class="fa align-center-center fa-volume-up fa-6x text-default"></i></div>
</a>
</div>
<div>
<a class="btn btn-lg top-buffer align-root quarter-width btn-warning" style="vertical-align: bottom; display: table-cell; position:relative;" id="WID021" href="#">
<div id="EL040"><i class="fa align-center-center fa-volume-down fa-6x text-default"></i></div>
</a>
</div>
</div>
While I was able to align the top small button using
style="vertical-align: top; display:table-cell;"If anyone has suggestions on how to resolve this while staying within the confines of Bootstrap/CSS, possibly utilizing flexbox, it would be greatly appreciated!
For reference, here's a demo on Bootply: bootply demo
The specific issue pertains to the orange button: https://i.sstatic.net/I7nH7.jpg