JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class="non-footer">
    <div class="flex-col">
      <div class="header">
        Header Text
      </div>
      <div class="content">
        <img class="left" src="https://dummyimage.com/400x300.png" />
        <div class="right">
          I don't care if this content overflows into the footer. The image, however, should be letterboxed (object-fit: contain).
        </div>
      </div>
    </div>
  </div>
  
  <div class="footer">
    This is the footer area
  </div>
</div>

CSS

.flex-col {
  display: flex;
  flex-direction: column;

}

.non-footer {
  height: 200px;
  max-height: 200px;
}

.header {
  background-color: blue;
  font-size: 40px;
}

.content {
  display: grid;
  grid-template-columns: 70% 1fr;
  gap: 8px;
  margin: 8px;
}

.content .left {
  width: 100%;
  /* height: 100%; */
  object-fit: contain;
}

.content .right {
  background-color: green;
}

.footer {
  background-color: blue;
  color: aliceblue;
}