JSFiddle - React, Tailwind, and code Playground

HTML

<html>                                                                                                                                                                                      
<body>                                                                                                                                                                                       
<div class="wrapper">                                                                                                                                                                        
    <div class="box" id="box1">
        <img src="http://lorempixel.com/100/100"/>
    </div>
    <div class="box" id="box2">
        <img src="http://lorempixel.com/150/150"/>
    </div>
</div>
</body>
</html>

CSS

.wrapper {
    width: 100%;
    border: 1px solid pink;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
}
.box {
    margin: 0px auto;
    vertical-align: middle;
    margin-right: 25px;
}

#box1 {
    width: 30px;
    height: 30px;
    border: 1px solid blue;
}
#box2 {
    width: 30px;
    height: 30px;
    border: 1px solid red;                                                                                                                                                                   
}