HTML: vertical algin Big/small div in same row (bootstrap)

Reference:

http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?answertab=votes#tab-top

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

and coomment trick for extra space: 

<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

TODO:
 flexbox