JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="item">
    <div class="text">
      Si vous comprenez ce qui est écrit ici, écrivez le mot tortue dans les commentaires.
    </div>
    <div class="img"></div>
  </div>
  <div class="item">
    <div class="text">
      Als u begrijpt wat hier is geschreven, schrijft u het woord 'schildpad' in de opmerkingen.
    </div>
    <div class="img"></div>
  </div>
  <div class="item">
    <div class="text">
      Om du förstår vad som skrivs här skriver du ordet "turtle" i kommentarerna.
    </div>
    <div class="img"></div>
  </div>
</section>

CSS

* { box-sizing: border-box; }

section {
  display: flex;
  flex-direction: column;
  border: 1px solid magenta;
}

.item {
  --img-width: 100px;

  width: calc(50% + var(--img-width) / 2);
  display: flex;
  align-items: center;
  text-align: right;
  border: 1px solid blue;
}

.img {
  min-width: var(--img-width);
  height: var(--img-width);
  border: 1px solid aqua;
  border-radius: 100%;
}

.text {
  margin: 2em;
}

.item:nth-child(even) {
  flex-direction: row-reverse;
  align-self: flex-end;
  text-align: left;
}