Two boxes don't place themselves correctly, but the other does

Question

Trying to make a website built up by boxes of different sizes. Been mixing a lot with it but can't get this last thing to work.

EDIT: So, as you can se in the JSFiddle, the two last boxes are starting on a new row. I want them to be placed between the two mediumNews DIV and under the lineNews DIV. But they just start a new row. Here is a simple Paint note to show how I want it.

Image of how I want it to be.

JSFiddle Here!

Here is also the code used in the JSFiddle:

HTML

    <div id="wrapNews">
    <div class="bigNews">
    L
    </div>

    <div class="mediumNews">
    M
    </div>

    <div class="lineNews">
    L
    </div>

    <div class="smallNews">
    S
    </div>

    <div class="smallNews">
    S
    </div>

    <div class="smallNews">
    S
    </div>

    <div class="smallNews">
    S
    </div>

    <div class="mediumNews">
    THEY SHOULD BE TO THE RIGHT OF THIS ONE...
    </div>

    <div class="lineNews">
    AND UNDER THIS ONE...
    </div>

    <div class="mediumNews">
    AND TO THE LEFT OF THIS ONE
    </div>

    <div class="smallNews">
    THIS BOX IS WRONG
    </div>

    <div class="smallNews">
    AND THIS ONE TO
    </div>  
</div>

CSS

* {
    padding: 0;
    margin: 0;
    outline: 1px solid red;
}

body {
background-image: url('bg3.jpg');
font-family: Helvetica;
}

#header {
width: 900px;
margin: 0 auto;
}

#wrapNews {
width: 920px;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.lineWrap {
overflow: hidden;
}

.smallNews {
display: inline-block;
width: 210px;
height: 200px;
border: 1px solid grey;
float: left;
box-sizing: border-box;
margin: 10px;
}

.lineNews {
display: inline-block;
width: 440px;
height: 200px;
border: 1px solid grey;
float: left;
box-sizing: border-box;
margin: 10px;
}

.mediumNews {
display: inline-block;
width: 210px;
height: 420px;
border: 1px solid grey;
float: left;
box-sizing: border-box;
margin: 10px;
}

.bigNews {
display: inline-block;
width: 900px;
height: 400px;
border: 1px solid grey;
float: left;
box-sizing: border-box;
margin:10px;
}

Answer 1

Just float:right this div :

<div class="mediumNews" style="float:right">
    AND TO THE LEFT OF THIS ONE
</div>

Example