title: How to force 2 divs to remain side by side
body: <p>My website has an image on the left which scales based upon browser size. To the right is some text.</p>
  
  <p>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</p>
  
  <p><a href="https://jsfiddle.net/0gyhrve2/" rel="nofollow">https://jsfiddle.net/0gyhrve2/</a></p>
  
  <p>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. </p>
  
  <p>My effort</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="img"&gt;Words&lt;/div&gt;
      &lt;div class="other"&gt;More words&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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{}
  </code></pre>