"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>

Syndicate content