JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bonsai-kitten">
    Litt<br>le<br>kit<br>ten<br>on<br>the<br>hill<br>side<br><br>little<br>kitten<br>made<br>of<br>ticky<br>tacky<br>…
    <div class="rubberimage">
      <div class="vertical-centerer">
        <img src="http://placekitten.com/200/200">
      </div>
    </div>
</div>

CSS

.bonsai-kitten {
    border: 3px solid red;
    position: relative;
}

/* image area next to the sidebar */
.rubberimage {
    position: absolute;
    left: 200px; /* assuming fixed sidebar width */
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.rubberimage .vertical-centerer {
    position: absolute;
    left: 0;  right: 0;  /* means width: 100%; */
    top: 50%;
    line-height: 10000px; /* large enough? */
    margin-top:  -5000px;
    vertical-align: middle;
}

.rubberimage img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}