JSFiddle - React, Tailwind, and code Playground
HTML
<section class="rev">
<h1>отзывы</h1>
<div class="content">
<div class="reviews">
<div class="reviews_item">
<div class="reviews_image">
<div>
<img src="https://htmlforum.io/uploads/monthly_2016_12/x7EXnLb4WJgM.jpg.04bb30184cb024c475514e8565f88058.jpg.pagespeed.ic.P2XHeNPfk6.webp" alt="#">
</div>
</div>
<div class="reviews_text">
Lorem ipsum dolor sit amet, pro copiosae consequuntur et, ex qui clita argumentum. Cum aperiri omittantur disputationi te. Eu mea nostro apeirian tacimates.
</div>
</div>
<div class="reviews_item">
<div class="reviews_image">
<div>
<img src="https://htmlforum.io/uploads/monthly_2016_12/xIc_vMqDP02g.jpg.2a77a32fe76ed2e833d7f13c3ee8b598.jpg.pagespeed.ic.vFtdjDy7WV.webp" alt="#">
</div>
</div>
<div class="reviews_text">Qui fabellas evertitur scribentur et, invidunt iudicabit sed te, et eam exerci intellegat necessitatibus. Ius mediocrem scripserit ne, ea mea nullam antiopam principes. Eu cum delenit perpetua persecuti.
</div>
</div>
</div>
</div>
</section>
<section class="que">
<h1>Остались вопросы?</h1>
<h3>свяжитесь со мной</h3>
<div class="content">
<!-- Остались вопросы? -->
</div>
</section>
CSS
* {
margin: 0;
padding: 0;
}
h1,
h3 {
text-align: center;
padding: 10px 0;
background: yellow;
}
.reviews {
width: 80%;
font-size: 0;
margin: 20px 10%;
}
.reviews_item {
overflow: hidden;
font-size: 14px;
vertical-align: top;
width: 50%;
}
.reviews,
.reviews_item {
display: -moz-inline-stack;
display: inline-block;
_overflow: hidden;
*zoom: 1;
*display: inline;
}
.reviews_item > div {
width: 50%;
padding: 20px 0;
}
.reviews_image {
width: 40%;
min-width:100px;
float: left;
overflow: hidden;
}
.reviews_image div {
width: 100px;
height: 100px;
border-radius: 100%;
overflow: hidden;
margin: 20px 20px auto auto;
}
.reviews_image div img {
height: 100%;
}
.reviews_text {
width: 60%;
float: right;
padding-right: 5px;
}