title: Responsive CSS Aligning 2-column Images
body: <p>I'm using the HTML/CSS below to put a couple smaller images next to one bigger image at 100% of the screen width. I want it to keep its aspect ratio, and it looks and works fine in Firefox and IE when resizing the browser. But Chrome doesn't make the heights go together as smoothly and seemingly makes one side or the other 1px off.</p>
  
  <p><a href="http://jsfiddle.net/gxb33ex5/" rel="nofollow">http://jsfiddle.net/gxb33ex5/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    float: left;
  }
  
  img.large {
    width: 70%;
  }
  
  img.small {
    width: 30%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#"&gt;
      &lt;img alt="Test Large" class="large" src="http://prizem.dreamhosters.com/test/test_large.jpg"&gt;
  &lt;/a&gt;
  &lt;a href="#"&gt;
      &lt;img alt="Test Small 1" class="small" src="http://prizem.dreamhosters.com/test/test_small_1.jpg"&gt;
  &lt;/a&gt;
  &lt;a href="#"&gt;
      &lt;img alt="Test Small 2" class="small" src="http://prizem.dreamhosters.com/test/test_small_2.jpg"&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any suggestions on how to properly make both sides responsive per their 70/30% split, keep aspect ratios, and fix this 1px Chrome difference? Thanks!</p>