JSFiddle - React, Tailwind, and code Playground

by Natalia

HTML

<div class="content">
   <div class="item content-item_1">
     <figure><img class="img1" src="http://i3.ltalk.ru/2/68/326802/28/10062128/4130798.png"></figure>
      
      <p>Текст №1. текст текст текст  текст текст текст  текст текст текст  ....</p>
   </div>
   <div class="item content-item_2">
     <figure><img class="img2" src="http://i3.ltalk.ru/2/68/326802/28/10062128/4130798.png"></figure>
      
      <p>Текст №2. текст текст текст  текст текст текст   текст текст текст ....</p>
   </div>
</div>

CSS

* {box-sizing: border-box;}
.content {
  width: 70%;
  margin: auto;
  border: 1px solid #ccc;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  
}
figure {
  position: relative;
  width: 60%;
  height: 200px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.content-item_1 figure {
  top:35px;
}

.content-item_2 figure {
  order:2;
  top:-35px;
}
.content-item_1 img {
  right: 0;
  z-index: 2;
}
.content-item_2 img {
  left: 0;
  z-index: 3;
}
p {
  width: 40%;
  padding: 10px;
  padding-top: 64px;
}
img {
  position: absolute;
  display: inline-block;
  width: 400px;
  height: 200px;
}