How can I float two divs left (under each other) and two divs right (under each other)

Question

I'm trying this:

DIV 1    DIV 3
DIV 2    DIV 4

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

I'm trying to use clear:both but it makes a top margin..

Use other divs to float left 1 and 2 and float right 3 and 4 is not an option in this case..

Here is my css:

.div1 {
  height:69px;
  float:left;
  width:48%;
  clear:both;
  background:pink;
}

.div2 {
  height:200px;
  margin-top:10px;
  display:block;
  float:left;
  width:48%;
  clear:both;
  background:lightblue;
}

.div3 {
  height:69px;
  line-height:30px;
  float:right;
  width:48%;
  background:red;
}

.div4 {
  height:200px;
  float:right;
  width:48%;
  background:yellow;
  clear:both;
}

Answer 1

Try changing the order of the HTML and change the clear of the divs.

<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
<div class="div4"></div>

And CSS

.div1 {
  height:69px;
  float:left;
  width:48%;
  background:pink;
  clear:left;
}

.div2 {
  height:200px;
  margin-top:10px;
  display:block;
  float:left;
  width:48%;
  background:lightblue;
  clear:left;
}

.div3 {
  height:69px;
  line-height:30px;
  float:right;
  width:48%;
  background:red;
  clear:right
}

.div4 {
  height:200px;
  float:right;
  width:48%;
  background:yellow;
  clear:right
}

JSFiddle: https://jsfiddle.net/6ywja6dn/