title: Cant figure out how to have image and text side by side in a div and keep it responsive, fiddle included
body: <p>I am having  a hard time coding this effect. So far with what I have it works at certain browser widths but if you stretch the browser around you will see stuff goes out of place. </p>
  
  <p><a href="http://jsfiddle.net/Hq8C4/" rel="nofollow noreferrer">http://jsfiddle.net/Hq8C4/</a></p>
  
  <p>I set </p>
  
  <pre><code>           float:right;
             float:left;
  </code></pre>
  
  <p>and some other stuff I tried you can see in the fiddle.</p>
  
  <p>here is what I need to happen..
  1. I need for the containing div to remain at width 100%
  2. I need an image container (that sticks to the bottom of the div) and a paragraph container that each take up 50% of the screen and have some room on the side (padding) as to not touch the browser borders. 
  3. I need it to be responsive. I can set a meta tag to make the paragraph hop ontop the phone and center both once the browser reaches a smaller width but when its larger it they need to be split like the photo supplied.
  ***4. no scroll.</p>
  
  <p>If you guys need me to clarify anything please comment and I will respond almost instantly!</p>
  
  <p>Thanks a bunch for the help!</p>
  
  <p>ps. Please include a fiddle. </p>
  
  <p><img src="https://i.stack.imgur.com/kIhkl.jpg" alt="This is pretty much the effect that I want to accomplish."></p>