How to force 2 divs to remain side by side

Question

My website has an image on the left which scales based upon browser size. To the right is some text.

The problem I have is the div on the right will drop to underneath the image on the left when the browser is made smaller, and only when the image is now the only item on the screen will it start to shrink

https://jsfiddle.net/0gyhrve2/

What I'm trying to achieve is that when you change the width of the page, the 2 divs will remain side by side, but the image on the left will shrink instead of the text dropping underneath.

My effort

<div class="outer">
    <div class="img">Words</div>
    <div class="other">More words</div>
</div>

CSS

.img {
float: left;
        background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: 349px;
        font-weight: bold;
        text-shadow: 1px 1px 2px #000;
        max-width: 300px;
}

.other{}

Answer 1

Is this what are you after: https://jsfiddle.net/0gyhrve2/3/ ?

CSS:

.img {
        background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: 349px;
        font-weight: bold;
        text-shadow: 1px 1px 2px #000;
        max-width: 300px;
}

.imgContainer {
    float: left;
    width: 75%;
}

.other {
    float: left;
    width: 25%;
}

HTML:

<div class="outer">
    <div class="imgContainer"><div class="img">Words</div></div>
    <div class="other">More words</div>
</div>

Answer 2

Well. I would just add these lines of code:

CSS

.img,
.other { display: inline-block; }
.outer { white-space: nowrap; }

Example at jsfiddle