I’ve got an info box with movie/tv show data and figure it’s fairly straightforward. But I’ve been battling this flexbox for (way too many) hours. I’ve tried countless solutions on here and elsewhere, but none work.
the box is simple: An image div (left) and text div (right) wrapped in a container.

I’ve encounter 3 problems:

1. When the (right-side) text div fills with text, it widens then drops below the image div. Text only starts wrapping when it’s on its own line. (I expect it to wrap without dropping the div below.)
2. Assigning the text div a width (ex: 70%) solves the issue, but then it drops to the next line as soon as it gets below that width (when I shrink the browser window).
3. On mobile screens, the text div (which is below the image on mobile) only takes up the width that I assign it (ex: 70%).

I want the text div to take up the remaining space in the same row, which is what I thought it was supposed to do. I thought the 2 child divs are bound by the container div, no the full window.

The box is simple. Using Fallout as an example:

<div class="tv-wrapper">
    <div class="tv-image"><img src="poster.jpg" width="300px"></div>
    <div class="tv-details">
    <h2>Fallout (2024)</h2>
    <dl>
        <dt>Network:</dt><dd> Prime Video</dd>
        <dt>Number of Seasons:</dt><dd> 1</dd>
        <dt>Status:</dt><dd> Returning Series</dd>
        <dt>Genre:</dt><dd> Sci-Fi & Fantasy, Action & Adventure, Mystery</dd>
        <dt>Creator:</dt><dd> Geneva Robertson-Dworet, Graham Wagner</dd>
        <dt>Main Cast:</dt><dd> Ella Purnell, Aaron Moten, Moisés Arias, Walton Goggins</dd>
        <dt>Overview:</dt><dd> The story of haves and have-nots in a world in which there’s almost nothing left to have. 200 years after the apocalypse, the gentle denizens of luxury fallout shelters are forced to return to the irradiated hellscape their ancestors left behind — and are shocked to discover an incredibly complex, gleefully weird, and highly violent universe waiting for them.</dd>
    </dl>
    </div>
</div>

And I’ve tried to keep the CSS as simple as possible until I get this figured out.

div.tv-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
div.tv-image {
    float: left;
    width: 300px;
}
div.tv-details {
    width: 70%;
    float: left;
}
dl {
    display: grid;
        grid-template-columns: 1fr 2fr;
    }
dt {
    grid-column-start: 1;
    }
dd {
    grid-column-start: 2;
    }

I’ve tried every combination of flex wraps, flex rows, justify-contents, floats, etc.

I want the info box to be responsive to screen size and I want it to take up the full screen. I want the (left side) image div to take up 1/3 of the wrapper div and the (right-side) text div to take up 2/3 of the wrapper div. I want the text div to drop below the image div when the screen gets smaller.

(The background colors in attached image are just for troubleshooting.)

[enter image description here](https://i.sstatic.net/oJNOysHA.jpg)