CSS - Equal height fluid width divs with background image

Question

I need to have 2 equal width divs side by side, the left column contains an image and the right column will contain dynamic text where the height of the text div can vary somewhere between 400px - 550px depending on how much text the site owner inputs.

I need the image to line up flush at the top and bottom with the end of the text box. The container element is fluid to be responsive.

Desired Effect

What I have at the moment is using floats to line the elements up together and responding fine, but the image falls short, like so:

I tried setting the image as a background-image on the left column with...

.column-image{
    padding-bottom:100%;
    margin-bottom:-100%;
    background-size:contain;
}

But this still falls short a little unless i tweak the padding-bottom amount. This is then rendered useless when I re-size my browser as the aspect ratio changes.

I am trying to avoid using Javascript to solve this.

Answer 1

Use display:table for the container and display:table-cell for the inner divs. Also make sure to remove the float

Fiddle: http://jsfiddle.net/afelixj/26b3vtfx/2/