JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="col pic">
    <img src="https://s-media-cache-ak0.pinimg.com/236x/e1/38/a1/e138a174c33a48931521dcc5639d4a03--happy-pictures-smiley-faces.jpg" alt="">
  </div>
  <div class="col"> Resize the window to decrease it's width. When the text starts wrapping to second line the image starts shrinking</div>
</div>

CSS

.row {
  width: 80%;
  border: 1px dotted red;
  margin: 5px;
  display: flex;
}

.col {
  float: left;
}

.pic {
  /* width: 80px; */
  /* Remove it */
  flex: 1 0 80px;
}

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