<div dir="ltr" class="teaser">
  <img src="https://images.unsplash.com/photo-1660586178733-d81eebe55499?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE5MzYwMjE&ixlib=rb-1.2.1&q=80" />
  <div class="text-container">
    <h2>Direction set to LTR</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores </p>
  </div>
</div>

<div dir="rtl" class="teaser">
  <img src="https://images.unsplash.com/photo-1660586178733-d81eebe55499?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE5MzYwMjE&ixlib=rb-1.2.1&q=80" />
  <div class="text-container">
    <h2>Direction set to RTL</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores </p>
  </div>
</div>

.teaser {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 800px) {
  .teaser {
    flex-direction: row;
  }
}

/* Decorative styles */
.teaser {
  max-width: 800px;
  margin: 0 auto 20px;
  background-color: lightgrey;
}

.text-container {
  max-width: 400px;
  padding: 40px;
  font-family: sans-serif;
}

img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 800px) {
  img {
    width: 400px;
    object-fit: cover;
  }
}