<h1>Awkward <div class="loader loader-2"></div></h1>

<div class="grid grid-bad">
  <div class="col col-1-3">
  </div>
  <div class="col col-1-3">
  </div>
  <div class="col col-1-3">
    <div class="module">
      <h2>Sidebar Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum minus deleniti excepturi reiciendis ullam adipisci.</p>
      <p>Maxime voluptatibus facere debitis exercitationem at a molestiae aliquam laboriosam doloribus nobis ratione distinctio doloribus nobis ratione distinctio sapiente!</p>
    </div>
  </div>
</div>

<h1>Good <div class="loader loader-2"></div></h1>

<div class="grid grid-good">
  <div class="col col-1-3">
  </div>
  <div class="col col-1-3">
  </div>
  <div class="col col-1-3">
    <div class="module">
      <h2>Sidebar Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum minus deleniti excepturi reiciendis ullam adipisci.</p>
      <p>Maxime voluptatibus facere debitis exercitationem at a molestiae aliquam laboriosam doloribus nobis ratione distinctio doloribus nobis ratione distinctio sapiente!</p>
    </div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  
}
*, :before, :after {
  box-sizing: border-box;
}
body {
  background: #222;
  color: white;
  padding: 2rem;
  line-height: 1.4;
}

.grid {
  overflow: hidden;
}

.grid-good .col {
  min-height: 1px;
}

.col {
  float: left;
  padding-right: 20px;
}
.col-1-3 {
  width: 33.33%;
}

.module {
  background: #333;
  padding: 1rem;
}
.module h2 {
  border-bottom: 1px solid #666;
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
}

img {
  width: 100%;
}
p {
  margin: 0 0 1rem 0;
}

.added {
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
  100% { opacity: 1; }
}



/* Loader from: https://codepen.io/timohausmann/pen/mrFjh */
.loader {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #0cf;
  border-radius: 50%;
  animation: spin 0.75s infinite linear;
}
.loader::before,
.loader::after {
  left: -2px;
  top: -2px;
  position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}
.loader-2 {
  border-top-color: transparent;
}
.loader-2::after {
  border: inherit;
  transform: rotate(deg);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
}

setTimeout(function() {
  $(".col:nth-child(2)").append("<div class='module added'><img src='http://placekitten.com/g/300/300'></div>");
}, 1500);

setTimeout(function() {
  $(".col:nth-child(1)").append("<div class='module added'><img src='http://placekitten.com/g/301/301'></div>");
  $(".loader").fadeOut();
}, 3000);