title: Making div fill space with a adjacent fixed size div
body: <p>I am trying to align a div to the bottom left of the container:
  <img src="https://i.stack.imgur.com/pNpua.png" alt="enter image description here"></p>
  
  <p>The green is the main body container inside . Yellow is the header div, inside which are logo and title.</p>
  
  <p>Now, I got the logo (orange div) to <code>{float:right; width: 30%}</code>, thus the width of the image inside dosen't exceed the div.</p>
  
  <p>The problem is with the blue one. I want it to be of same height as orange (which depends on image) and as fill us rest of the space. (As u can see in the image). Also I want the text of the blue div (title) to be aligned to bottom left.</p>
  
  <p>I tried various position absolute, relative for parent/child and setting the top and bottom. Using fixed height works, but the div needs to be of the same height as the image div.</p>
  
  <p>Any help would be appreciated as I will learn more about css.</p>
  
  <p><strong>EDIT:</strong> The width of the image will depend upon boilerplate and the dimensions of the image are not fixed. Title will contain a css formatted <code>&lt;h1&gt;</code> and a <code>&lt;span&gt;</code> for icons.</p>
  
  <p><strong>EDIT2:</strong> My current code: <a href="http://jsfiddle.net/QxK9U/" rel="nofollow noreferrer">http://jsfiddle.net/QxK9U/</a></p>