CSS: Two Logos aligned to the left and to the right which should autoscale by window resize

I have two logos on my website which should go on top of my website. One logo should be aligned to the left and the second logo to the right. Now when the browser window gets pushed smaller, the space in between those two logos should get narrower and eventually when the two logos "hit" each other, both are supposed to scale smaller without breaking the line.

Right now only the left logo scales down and the right logo breaks the line and gets pushed lower without scaling down at all.

Can anybody help me?

My CSS:

.image-wrapper
{
 position: relative;
 white-space: nowrap;
}

.scale-image
{
 display: block;
 width: auto;
 max-width: 55%;
 white-space: nowrap;

}

Here is my HTML code:

<div class="image-wrapper">
<a href="#" ><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image"/></a>
<div />

<div class="image-wrapper">
<a href="#" target="_blank" ><img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image"/></a>
<div />

Example link: http://www.drogies-test.de/header_show.html

Solution

I've adjusted the mark-up structure to nest elements correctly.

.image-wrapper:first-of-type,.image-wrapper:nth-child(1) {
    float: left;
}

.image-wrapper:last-of-type,.image-wrapper:nth-child(2) {
    float: right;
}

.image-wrapper {
    max-width: 50%;
}

.scale-image {
    width: 100%;
    height: auto;
}

<body>
  <div class="image-wrapper">
    <a href="http://www.drogies-test.de/"><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image"></a>
  </div>
  <div class="image-wrapper">
    <a href="http://www.theater-osnabrueck.de/" target="_blank"><img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image"></a>
   </div>
</body>

Here's a flex solution:

.image-wrapper {
    max-width: 50%;
}

.scale-image {
    width: 100%;
    height: auto;
}

.flex-wrapper {
    display: flex;
    justify-content: space-between;
}

<div class="flex-wrapper">
  <div class="image-wrapper">
    <a href="http://www.drogies-test.de/"><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image"></a>
  </div>
  <div class="image-wrapper">
    <a href="http://www.theater-osnabrueck.de/" target="_blank"><img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image"></a>
   </div>
</div>

Note that flex is not supported in legacy browsers like IE 8 and 9, and some older versions of webkit browsers like Safari and Firefox (a deprecated or hybrid syntax variation is supported instead).

Learn more: caniuse.com