вставить вертикальную разделительную линию между двумя вложенными div, а не на всю высоту

У этого есть следующие свойства:

1) отступы / поля с обеих сторон, которые я могу контролировать или которые выглядят разумно (т.е. гораздо ближе к одному div, чем к другому)

2) оставляет поля сверху и снизу, как показано, т.е. не расширяет всю вертикальную ширину голубого div

3) динамически поддерживает # 1 и # 2 как окно браузера становится больше / меньше, а размер синего поля увеличивается / уменьшается вместе с ним

Я ищу простое решение, желательно только на CSS.

Соответствующий CSS:

#left {
  position: relative;
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
}

#right {
  position: relative;
  float: right;
  width: 49%;
  margin: 0;
  padding: 0;
}

#blue_box {
  position: relative;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  margin-left: 40%;
  overflow: auto; /*needed so that div stretches with child divs*/
}