JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frame">
   <img src="http://jsfiddle.net/img/logo.png" height="250" />
</div>
<div class="frame">
   <img src="http://jsfiddle.net/img/logo.png" height="25" />
</div>
<div class="frame">
   <img src="http://jsfiddle.net/img/logo.png" height="23" />
</div>
<div class="frame">
   <img src="http://jsfiddle.net/img/logo.png" height="21" />
</div>
<div class="frame">
   <img src="http://jsfiddle.net/img/logo.png" height="19" />
</div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="17" />
</div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="15" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="13" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="11" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="9" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="7" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="5" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="3" />
 </div>

CSS

.frame {
    height: 35px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    text-align: center; 
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 25px;
    max-width: 160px;
}