JSFiddle - React, Tailwind, and code Playground

by Ahmad Sharif

HTML

<script src="https://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="row">
       <div class="col-xs-5">
          <div style="height:10em;border:1px solid #000">Big</div>
       </div>
       <div class="col-xs-5">
           <div style="height:3em;border:1px solid #F00">Small</div>
       </div>
</div>

CSS

.col-xs-5 {
    display: table;
    
}

.col-xs-5 > div {
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}