Aligning div with background image of parent div

I have two div's, one over the other. The bottom div has a background image with two columns, one at 40% width and the other 60%

    .container {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAABAQMAAAB0GXF9AAAABlBMVEX////09PQtDxrOAAAAD0lEQVQY02P4PygBw3AHAG6mlWu52WYpAAAAAElFTkSuQmCC');
        background-repeat: repeat-y;
        background-position: 40% 0; 
    }

The top div has a max width at 600px and inside two div columns, one at 40% width and the other 60%

    .container .row .col-1, .container .row .col-2 {
        display: inline-block;
        float: left;
    }

    .container .row .col-1 {
        width: 40%;
        background-color: #00ffff;
    }

    .container .row .col-2 {
        width: 60%;
        background-color: #ff0000;
    }

If the browsers window width is at 600px or less, the background image and div column align perfectly but any wider the two begin to misalign.

Is it possible to align the top and bottom div columns?

Please see this JSFiddle

Thanks for any help