four boxes -- put 2 on each row

I have 4 boxes and I want to put them 2 x 2, but cannot figure out how to do it.

I have created a jsfiddle here

The issue I am having is that one of the boxes is above, and the other three are below.

I want it to look like this

My code is as follows for convenience.

html

<div class="wrap">
  <div class="bg"></div>
  <div class="main-container artists">

    <div class="employee-box">
    </div>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-1">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- back content -->
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-2">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- front content -->
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-3">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- back content -->
        </div>
      </div>
    </div>
  </div>

css

body{
  height: 2000px;
}
.wrap {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167792/mountains_copy.jpg') no-repeat center center;
  background-size: cover;
  transform: scale(1.1);
}

.employee-box {
  background-color: red;
  height: 250px;
  width: 250px;
}

.employee-1 {
  background: yellow;
}

.employee-2 {
  background: pink;
}

.employee-3 {
  background: green;
}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  display: inline-block;
}

.container-border{
  border: 1px solid #ccc; 
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container, .front, .back {
  width: 250px;
  height: 250px;
}

/* flip speed goes here */
.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  background-color: #fff;
}