JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list">

  <div class="item">
    <img src="https://lorempixel.com/200/200/" alt="">
    <div class="content">
      <h2>heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt impedit vero, ea numquam. Odio consequuntur magnam incidunt excepturi quis, esse perspiciatis iure atque voluptatum, quam quas aspernatur ducimus dicta eveniet.</p>
    </div>
  </div>

  <div class="item">
    <img src="https://lorempixel.com/200/200/" alt="">
    <div class="content">
      <h2>heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt impedit vero, ea numquam. Odio consequuntur magnam incidunt excepturi quis, esse perspiciatis iure atque voluptatum, quam quas aspernatur ducimus dicta eveniet.</p>
    </div>
  </div>

  <div class="item">
    <img src="https://lorempixel.com/200/200/" alt="">
    <div class="content">
      <h2>heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt impedit vero, ea numquam. Odio consequuntur magnam incidunt excepturi quis, esse perspiciatis iure atque voluptatum, quam quas aspernatur ducimus dicta eveniet.</p>
    </div>
  </div>
  
</div>

CSS

* { box-sizing: border-box; }

.item {
  display: flex;
}
.item > img {
  width: calc(50% - 10px);
}
.content {
  width: calc(50% - 10px);
  margin-left: 20px;
}
.list > .item:nth-child(even) {
  flex-direction: row-reverse;
}
.list > .item:nth-child(even) .content {
  margin-left: 0;
  margin-right: 20px;
}