JSFiddle - React, Tailwind, and code Playground
HTML
<div class="aboutUs">
<h1 class="aboutUs__title">Lorem ipsum</h1>
<span class="aboutUs__subTitle">Lorem ipsum dolor sit amet</span>
<div class="aboutUs__row row_left">
<div class="row__info">
<p class="row__date">Lorem 2018</p>
<h2 class="row__title">Lorem ipsum dolor</h2>
<p class="row__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est debitis, excepturi id laborum ex ipsum quibusdam dolore ea aut, doloremque possimus, iusto modi. Quam labore, dignissimos sapiente praesentium eius mollitia.</p>
</div>
<div class="row__img row__img_left">
<img src="https://i2.wp.com/puzzlewocky.com/wp-content/uploads/2017/02/LatinSquareOrder7.jpg?resize=700%2C700" alt="">
</div>
</div>
<div class="aboutUs__row row_right">
<div class="row__img row__img_right">
<img src="https://i2.wp.com/puzzlewocky.com/wp-content/uploads/2017/02/LatinSquareOrder7.jpg?resize=700%2C700" alt="">
</div>
<div class="row__info">
<p class="row__date">Lorem 2018</p>
<h2 class="row__title">Lorem ipsum dolor</h2>
<p class="row__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est debitis, excepturi id laborum ex ipsum quibusdam dolore ea aut, doloremque possimus, iusto modi. Quam labore, dignissimos sapiente praesentium eius mollitia.</p>
</div>
</div>
<div class="aboutUs__row row_left">
<div class="row__info">
<p class="row__date">Lorem 2018</p>
<h2 class="row__title">Lorem ipsum dolor</h2>
<p class="row__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est debitis, excepturi id laborum ex ipsum quibusdam dolore ea aut, doloremque possimus, iusto modi. Quam labore, dignissimos sapiente praesentium eius mollitia.</p>
</div>
<div class="row__img row__img_left">
<img src="https://i2.wp.com/puzzlewocky.com/wp-content/uploads/2017/02/LatinSquareOrder7.jpg?resize=700%2C700" alt="">
</div>
</div>
<div class="aboutUs__row row_right">
<div class="row__img...
CSS
.aboutUs {
width: 800px;
margin: 0 auto;
text-align: center;
}
.aboutUs__title {
margin: 0;
margin-bottom: 5px;
font-weight: 700;
font-size: 25px;
}
.aboutUs__subTitle {
margin: 0;
}
.row_left,
.row_right {
text-align: right;
font-size: 0;
margin: 30px 0;
}
.row_right {
text-align: left;
}
.row__info {
width: 35%;
display: inline-block;
font-size: 15px;
vertical-align: middle;
}
.row__date {
margin: 0;
font-size: 20px;
text-transform: uppercase;
font-weight: 700;
}
.row__title {
margin: 0;
margin-bottom: 10px;
}
.row__text {
margin: 0;
}
.row__img {
width: 20%;
display: inline-block;
margin: 0 40% 0 5%;
}
.row__img_left {
margin: 0 40% 0 5%;
}
.row__img_right {
margin: 0 5% 0 40%;
}
.row__img img {
width: 100%;
height: auto;
border-radius: 50%;
vertical-align: middle;
}