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>