"synchronized" re-sizing of two same-height/varying-width images

I have two side-by-side images in a page masthead. They have identical heights (here: 50 px). One image has a fixed width (here: 150px). The width of the second image (50-500px) depends on the actual page ( = graphic page title).

When the viewport width is reduced, the image dimensions should not changed, until image-2 abuts on image-1.

When the viewport width is further reduced, both images should scale down in unison (without changing aspect ratios), see attached picture.

Steps 1-3 are easy enough, e.g., with a table:

<div>
     <table class="masthead">
	<tr>
	    <td style="width: 16%">
		<div class="center">
		     <img alt="logo" class="left" src="image-1.jpg" style="width:100%; max-height:50px ">
		</div>
	    </td>
	    <td style="width: auto">
                <img class="center" src="image-2.jpg" style="max-height:52px; height:auto">
	    </td>
        </tr>
     </table>
</div>

Step 4 is a different story. I have tried with tables, div, and combinations thereof. Without success. In most cases, only image-1 shrinks.

What is the trick???