css – Right column should be as high as left

I want to have a div containing two columns, of which the left one contains text and the right one an image. The height of the image should be dictated by the length of the text.
The image should not exceed 40 % of the viewport’s width and it should not exceed the text’s height. There is no size given as fixed amount of pixels.

This is what I have come up with so far (I stripped it down here, so for mobile view reasons, the right column has to come first, because in mobile view the image is shown above the text):

The CSS:

.my_list_item_container {
    clear: both;
    justify-content: space-between;
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.my_list_item_container_flex {
    display: flex;
    flex-direction: column;
}

.my_list_item_left_column {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.my_list_item_right_column {
    float: right;
}

The HTML:

<div class="my_list_item_container my_list_item_container_flex">
    <div class="my_list_item_right_column">
        <img src="example.png">
    </div>
    <div class="my_list_item_left_column">
        Lorem ipsum...
    </div>
</div>

And there is a JS function attached to the event resize event of window. I thought it would be necessary to handle this with JavaScript, but maybe a pure CSS solution is possible (I did not find any, but I am not quite experienced with CSS):

function my_item_resize(event) {
    let containers = document.querySelectorAll(".my_list_item_container")
    for (let container of containers) {
        let leftcol = container.querySelector(".my_list_item_left_column")
        let rightcol = container.querySelector(".my_list_item_right_column")
        container.style.height = leftcol.offsetHeight + "px" 
    }
}