JSFiddle - React, Tailwind, and code Playground

HTML

<div style='border:1px solid red; margin-top:100px'>
  DIV 1
</div>
<div style='height:306px;border:1px solid red;'>
  <div class='VerticalAlign'>
    An
    <img style='width:300px;' class='rotate90' src="http://www.outreachaz.com/images/EMD%20Check.jpg" />image!
  </div>
</div>
<div style='width:100%; border:1px solid red;'>
  DIV 2
</div>

CSS

.VerticalAlign {
height: 300px;
}

.rotate90 {
position: relative;
top: 50%;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform: rotate(90deg) translateY(-50%);
transform: rotate(90deg) translateY(-50%);
}