Responsive Image position in div

I have two divs. Both 50% width, one on the right and one on the left. Inside the right div is an image set to max-width: 100%.

This all works fine until you view in a tablet. The text on the left side are relatively longer - longer than the height of the image on the right div. Because of the properties of the image, I need it to always sit on the bottom of its div. I can’t use position: absolute as this breaks the responsive sizing of the image. Can anyone suggest an alternative?

Thanks in advance.

You could maybe try giving the divs display: table-cell and vertical-align: bottom.

Thanks for your reply but unfortunately that didn’t work as the image is still at the top.

Generally this is not easy to do without out using positioning. We need to see an example.

I’ve attached two images. One with the view in a desktop (left) and the other in the problematic tablet.

There will eventually be navigation at the top and other content below but what I need is for the model to sit nicely at the bottom of the div no matter the device. The problem is that in the tablet the width of the text is reduced and consequently the div becomes longer.
I guess it might mean just using media queries to make sure there is a top margin for the image if it is a tablet?

What I suggested in post 2 does work. Make sure to put vertical-align: botton on the table-cell divs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
.wrap {display: table;}
.wrap div {display: table-cell; vertical-align: bottom; width: 50%;}
</style>
	
</head>
<body>

<div class="wrap">
	<div>
	<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
	
	<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
	
	<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
	</div>
	<div>
	<img src="image.gif">
	</div>
</div>

</body>
</html>

Yes, it works in the example. It must be something conflicting in mine. This is great though because now I have this working I can peel down the rest of the code and start again. Thanks for your help, much appreciated.