I want to put the .e div in the .second div up by 50%. My goal is to get rid of the white space between the two .e divs. 

I want to do this without explicitly moving the div up (ex. position: relative; top: -50%;). I noticed that doing float: right; on the .first div fixes the layout issue, but destroys the order of the HTML contents. 

Here's a picture of what I'm trying to do: 
![enter image description here](https://i.stack.imgur.com/gwzVz.png)

**How can I make this work while keeping my html in the same order?**

```css
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

body {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}
body .a {
  background: #f04576;
}
body .b {
  background: #53a2e3;
}
body .c {
  background: #ef4658;
  text-align: right;
}
body .d {
  background: #f4ad49;
  text-align: left;
}
body .e {
  background: #69de92;
}
body .first {
  height: 100%;
  width: 100%;
}
body .second {
  height: 100%;
  width: 100%;
}
body .tall:nth-child(2n) {
  position: relative;
  top: -50%;
}
body .tall, body .long, body .square {
  float: left;
}
body .tall {
  height: calc(100% - 4rem);
  width: calc(25% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
}
body .long {
  height: calc(50% - 4rem);
  width: calc(50% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
}
body .square {
  height: calc(50% - 4rem);
  width: calc(25% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
  text-align: center;
}
```

```html
<div class='first'>
  <div class='a tall'>A</div>
  <div class='c square'>B</div>
  <div class='b long'>C</div>
  <div class='d long'>D</div>
  <div class='e square'>E</div>
</div>
<div class='second'>
  <div class='a square'>A</div>
  <div class='c long'>B</div>
  <div class='b long'>C</div>
  <div class='d square'>D</div>
  <div class='e tall'>E</div>
</div>
```

**Edit 1:** 
I don't want to do `position: relative; top: -50%;`, because if I repeat my HTML, I'm left with a giant gap after each .second div. Here's an example: 

```css
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

body {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

body .a {
  background: #f04576;
}

body .b {
  background: #53a2e3;
}

body .c {
  background: #ef4658;
  text-align: right;
}

body .d {
  background: #f4ad49;
  text-align: left;
}

body .e {
  background: #69de92;
}

body .first {
  height: 100%;
  width: 100%;
}

body .second {
  height: 100%;
  width: 100%;
}

body .tall:nth-child(2n) {
  position: relative;
  top: -50%;
}

body .tall,
body .long,
body .square {
  float: left;
}

body .tall {
  height: calc(100% - 4rem);
  width: calc(25% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
}

body .long {
  height: calc(50% - 4rem);
  width: calc(50% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
}

body .square {
  height: calc(50% - 4rem);
  width: calc(25% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
  text-align: center;
}
```

```html
<div class='first'>
  <div class='a tall'>A</div>
  <div class='c square'>B</div>
  <div class='b long'>C</div>
  <div class='d long'>D</div>
  <div class='e square'>E</div>
</div>
<div class='second'>
  <div class='a square'>A</div>
  <div class='c long'>B</div>
  <div class='b long'>C</div>
  <div class='d square'>D</div>
  <div class='e tall'>E</div>
</div>
<!-- Repeating the code -->
<div class='first'>
  <div class='a tall'>A</div>
  <div class='c square'>B</div>
  <div class='b long'>C</div>
  <div class='d long'>D</div>
  <div class='e square'>E</div>
</div>
<div class='second'>
  <div class='a square'>A</div>
  <div class='c long'>B</div>
  <div class='b long'>C</div>
  <div class='d square'>D</div>
  <div class='e tall'>E</div>
</div>
```