JSFiddle - React, Tailwind, and code Playground

HTML

Move the vertical splitter to see how Layouts react to window size...
<hr>
This is how Flexbox with flex-items should work:
<div class="layout">
  <div class="picture">
      <img src="http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg" alt="Random Profile picture" />
  </div>
    <div class="details"><div>username</div><div>email</div><div>etc.</div></div>
</div>
<hr>
But it works as a combination of Flexbox and table-cells:
<div class="layout table">
  <div class="picture">
      <img src="http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg" alt="Random Profile picture" />
  </div>
    <div class="details"><div>username</div><div>email</div><div>etc.</div></div>
</div>

CSS

/* flex layout with display:table falllback */

.layout {
  width: 100%;
  display: flex-item;
}

.layout.table {
   display: table; /* fallback */
   display: inline;
}

.layout.table > * {

    flex: 1 0 auto;
}

.layout > .picture {
  width: 30%; /* falllback */
  flex: 0 1 30%;
  background: tomato;
}

.layout > .details {
  width: 500px; /* falllback */
  flex: 1 1 500px; /* size for demonstration of shrinking */
  background: aqua;
}

.layout > .picture {
    font-size: 0;
}
.layout > .picture > img {
    width: 100%; height: auto;
    padding: 0; margin: 0;
}