JSFiddle - React, Tailwind, and code Playground
HTML
<div class="absoluteCenterWrapper">
<img src="http://jsfiddle.net/img/logo.png" class="absoluteCenter">
<p>Paragraph goes here.</p>
<p>Paragraph goes here.</p>
</div>
<div class="absoluteCenterWrapper">
<img src="http://jsfiddle.net/img/logo.png" class="absoluteCenter">
<p>Paragraph goes here.</p>
<p>Paragraph goes here.</p>
<p>Paragraph goes here.</p>
</div>
CSS
.absoluteCenterWrapper {
position:relative; /* Contains the image in the div */
background:yellow;
margin:1em;
padding:0.001em;
min-width:350px;
}
.absoluteCenterWrapper p {
margin:1em 0 1em 122px;
padding-left:.5em;
}
/* Positioning */
.absoluteCenter {
margin:auto; /* Required */
position:absolute; /* Required */
top:0;bottom:0; /* Aligns Vertically */
background:orange;
width:122px;
}
/* Sizing - resizes down to avoid cutting off */
.absoluteCenter { /* Fallback Sizing */
max-height:100%;
max-width:100%;
}