REM as VW responsive css site

Question

Im making something like this: http://codepen.io/axlpl/pen/vEOyqL but when you resizing browser sometimes right site is under left not in one line, can any one help me to fix this issue? in Sass function vw its function to get procent, first arg "$size" its project size, here I got 1200px, second arg its "$target" its element size in example in project size 1200px we got element wrapper with 400px size;

HTML

<div class="wrapper">
    <div class="left--green"></div>
    <div class="right">
        <div class="block--red"></div>
        <div class="block--black"></div>
        <div class="block--blue"></div>
        <div class="block--yellow"></div>
    </div>
</div>

SASS

@function vw($size, $target) {
    $vw: $size / 100;
    @return ($target / $vw) * 1rem;
}


.wrapper {
    width: vw(1200, 400);
    height: vw(1200, 200);
    float: left;
}

.left,
.right {
    width: vw(1200, 200);
    height: vw(1200, 200);
    float: left;
    display: block;

    &--green {
        @extend .right;
        background: green;
    }
}

.block {
    height: vw(1200, 100);
    width: vw(1200, 100);
    float: left;

    &--red {
        @extend .block;
        background: red;
    }

    &--blue {
        @extend .block;
        background: blue;
    }

    &--yellow {
        @extend .block;
        background: yellow;
    }

    &--black {
        @extend .block;
        background: black;
    }
}

JS

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

function updateVw(){
    var vw = (viewport().width/100);
    if(vw % 2) {
      console.log('tak');
    } else {
      console.log('nie');
    }
    jQuery('html').css({
        'font-size' : vw + 'px'
    });
}

updateVw();

jQuery(window).resize(function(){
    updateVw();
});

Answer 1

This is likely a rounding problem. The width of your inner div elements is 16.666667% and for some breakpoints they exceed the width of the parent (which is 33.333333%); when this happens, as you've observed, the second div is shifted under the first one

As a workaround you may simply define the width of the inner divs like so

.left--green, right {
  width: 50%;
}

Example: http://codepen.io/anon/pen/emNgmb