Миша

<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>

.section:nth-child(2n + 1) {
    float: left;
    clear: left;
}

.section:nth-child(2n) {
    float: right;
    clear: right;
}

Скриншот

.container {
  column-width: 250px; /* Ширина колонки */
  column-gap: 10px;  /* Расстояние между колонками */
}

.item {
  break-inside: avoid; /* Запрещает разрыв блока */
}

Скриншот

.body { display: grid; grid-template-columns: 3fr 1fr; }
.content { grid-column: 1 / 2; }
.sidebar { grid-column: 2 / 3; }

.body { display: flex; }
.content { flex-grow: 3; }
.sidebar { flex-grow: 1; }

/* Придется убрать отступ между инлайн элементами */
.content { display: inline-block; width: 70%; }
.sidebar { display: inline-block; width: 30%; }

.body { display: table; width: 100%; }
.content { display: table-cell; width: 70%; }
.sidebar { display: table-cell; width: 30%; }

<a href="#" class="btn">
  <span class="top">menu</span>
</a>

.top {
  position: relative;
  display: inline-block;
  top: -.45em;
}

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

.content {
  display: table-row;
  height: 100%;
}

• Шапка и подвал фиксированной высоты

  
  Расчет высоты блока с помощью функции calc().
  

  .content {
    height: calc(100vh - 50px - 50px);
  }

  
  Демо на codepen
  
  
  
• Шапка и подвал нефиксированной высоты

  
  Эмуляция поведения таблицы.
  

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

  
  Демо на codepen
  
  
  Резиновые блоки с помощью flexbox.
  
  

  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .content {
    flex-grow: 1;
  }

  
  Демо на codepen