How can I arrange an image and text in a flex row?

I'm trying to shrink both the image and the column with the text at the right. At the same time. At this point, only the text is shrinking, until the screen is to small for both columns.

It's my first time using flex for a whole site, so I'm missing some concepts y guess.

The idea is to make the image and the text to have the same width all the time.

This is a version only for desktop and tablet screens. Th movil version will delivery another content.

.twoColumns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.right {
  width: 600px;
  max-width: 100%;
  margin-left: 28px;
}

<div class="twoColumns">
  <img src="https://dummyimage.com/600x400/000/fff" class="responsive" width="600">
  <div class="right" class="responsive">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>

Solution

Remove all fixed widths and nest the image in a div.

.twoColumns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.right {
  max-width: 100%;
  margin-left: 28px;
}

<div class="twoColumns">
  <div class="left">
    <img src="https://dummyimage.com/600x400/000/fff" class="responsive">
  </div>
  <div class="right">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>