JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
  <div style="background-color: red;">
    <h2>Title (variable height)</h2>
    <p>Summary (variable height)</p>
  </div>
  <div style="background-color: orange;">
    <img  src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg"/>
  </div>
</div>

CSS

body { display: flex; flex-direction: column; }