JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="container">
        <div class="review">
            <div class="clearfix">
                <div class="content">
                    <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt="">
                        <div  class="centered">какая-то ерунда </div>
                </div>
            </div>  
        </div>
        <div class="review" >
            <div class="clearfix ">
                <div class="content" >
                    <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt="">
                        <div  class="centered">
                            какая-то ерунда<br>
                            еще ерунда 
                        </div>
                </div>
            </div>  
        </div>
</div>

CSS

html, body{
    margin:0;
    width:100%;
    background:#ccc;
    overflow-x:hidden;
}
.clearfix{
    clear:both;
}
.clearfix:before, .clearfix:after{
    content:" ";
    display:table;
    clear:both;
}
.container{
    width:70%;
    margin:auto;
}
.review{
    background:#fff;
    position:relative;
    margin-bottom:20px;
    text-align:left;
}
.review:after{
    content:" ";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    background:#fff;
    width:2000px;
}
.review:nth-child(odd):after{
    right:100%;
    left:auto;
}
.review:nth-child(odd) img{
    float:left;
    vertical-align:middle;
}
.review:nth-child(even):after{
    left:100%;
    right:auto;
}
.review:nth-child(even) img{
    float:right;
    vertical-align:middle;
    
}
.content{
    height:100px;
}
.content:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;  
}
.centered {
    display: inline-block;
    vertical-align: middle;
 }