JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>
<div><img src="http://placehold.it/180x100"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
<li>
<div><img src="http://placehold.it/146x16"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
</ul>
CSS
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
width: 100%;
position: relative;
float: left;
padding: 0 0 30px;
}
ul li div {
display: inline-block;
height: 100%;
max-height: 100%;
position: relative;
vertical-align: middle;
width: 200px;
}
ul li img {
display: block;
vertical-align: middle;
width: 100%;
}
ul li blockquote {
color: #999999;
display: inline-block;
font-style: italic;
margin: 0;
vertical-align: top;
width: 62%;
margin-left:2%;
}
ul li blockquote p {
margin: 10px 0;
}