Stack Overflow: CSS: how to position 3 blocks

by jeffmiller

HTML

<body>
  <div class="div1">
    <div class="table-display">
      <div class="cell-display div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Laborios, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident
        deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque
        vitae soluta id eveniet inventore animi laudantium iste vero, niet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborios, deleniti neque vitae soluta
        id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi
        laudantium iste vero, niet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborios, deleniti neque vitae soluta id eveniet inventore animi laudanor
        sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet invenor sit amet, consectetur...

CSS

.table-display {
  display: table;
  width: 100%;
  height: 100%;
}

.cell-display {
  display: table-cell;
  width: 50%;
  height: 100%;
}

.div1,
.div2,
.div3,
.div4 {
  padding: 40px;
}

.div1 {
  background: #ABC;
}

.div2 {
  background: #DEF;
}

.div3 {
  margin: 40px;
  margin-top: 0;
  background: #CAD;
  height: calc(50% - 40px);
}

.div4 {
  margin: 40px;
  margin-bottom: 0;
  height: 50%;
  background: #FAD;
}