JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="image">
    <img src="https://svgshare.com/i/NRA.svg">
  </div>
  <div class="content">
    Here is content that is only one line.
  </div>
</div>

<div class="container">
  <div class="image">
    <img src="https://svgshare.com/i/NRA.svg">
  </div>
  <div class="content">
    Here is the content that is even longer and longer and goes on two lines which the image on the left needs to be larger
  </div>
</div>


<div class="container">
  <div class="image">
    <img src="https://svgshare.com/i/NRA.svg">
  </div>
  <div class="content">
    Here is the content that is the longest and will continue on three lines or four lines etc... and the image needs to continue to grow based on the height of the content.
  </div>
</div>

CSS

.container {
  width: 350px;
  display: flex;
  flex-flow: row;
  align-items: stretch;
  border: 1px solid blue;
  margin-bottom: 25px;
}

.image {
  /** TODO Figure this css out **/
}

.image img {
  height: 100%;
  display: block;
  background: lightgrey;
}

.content {
  border: 1px solid yellow;
  font-size: 14px;
}