Placing a div below a wrapper containing multiple divs

This might be an easy one. Below is a structure which I want to create:

But I always end up with either this:

Or this:

Here is my code:

HTML

.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
  width: 25px;
  height: 25px;
  margin-bottom: 5px;
  border: 3px solid black;
}
.newdiv6 {
  width: 150;
  height: 150;
  border: 3px solid black;
}
.newdiv {
  height: 250px;
  width: 450px;
  float: left;
  border: 3px solid black;
}
.divwrapper {
  float: left;
  border: 3px solid blue;
}
.mainwrapper {
  display: block;
}

<div class="mainwrapper">
  <div class="newdiv"></div>
  <div class="divwrapper">
    <div class="newdiv2"></div>
    <div class="newdiv3"></div>
    <div class="newdiv4"></div>
    <div class="newdiv5"></div>
  </div>
</div>
<div class="newdiv6"></div>

This looks like the second image above (in my Chrome browser).