I have two DIV layers, one above the other. In the top DIV, there is an image, and in the bottom DIV, there is a block of text. The amount of text in the bottom DIV will change, thus increasing and decreasing the required height. I need to dynamically decrease the height of the image in the top DIV based on how much height is required for the bottom. I have exactly 600px vertical space available.

For example: If the bottom DIV requires 200px height, I need for the image to change height to 400px. If the bottom DIV requires 300px height, I need for the image to change height to 300px.

I know that I can make the image height 100% of the top DIV, thus allowing it to expand or contract as needed. The issue is that I need for the bottom DIV to be able to expand freely and for the top DIV to react accordingly. In other words, I cannot have either be a fixed height.

<div id="topdiv">
<img src="example.png" alt="This image needs a height based on the bottom div" />
</div>
<div id="bottomdiv">
This text needs to be able to expand or contract freely
</div>

Can anyone help?