JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td style="vertical-align: middle;">
            I am vertically centered text!
        </td>
    </tr>
</table>
<br />
<div class="outer" style="position:absolute;">
    <div class="inner" style="display:table-cell; vertical-align:middle;">
        I am not vertically centered, but I wish I was :(
    </div>
</div>

<br />
<img style="vertical-align: top;" src="http://i.imgur.com/WeuPI.jpg" /> I am some top-aligned text.<br /><br />
<img style="vertical-align: middle;" src="http://i.imgur.com/WeuPI.jpg" /> I am some middle-aligned text.<br /><br />
<img style="vertical-align: bottom;" src="http://i.imgur.com/WeuPI.jpg" /> I am some bottom-aligned text.<br /><br />

CSS

td
{
    height: 150px;
    border: solid 1px #f00;   
    padding: 10px;    
}
div.outer
{
    position:absolute;
}
div.inner
{
    height: 150px;
    border: solid 1px #00f;
    padding: 10px;
    width: 300px;    
}
img
{
    width: 100px;   
}