Почему гармошка открывается вверх с "flex-direction: column"?

Question

Мой макет состоит из 2 столбцов, на левой стороне есть текст, а на правой - гармошка.Правая сторона была расположена с «flex-direction», чтобы появиться сверху левой стороны, но это заставляет аккордеон в правой стороне открываться вверх вместо вниз.

Как мне получить аккордеонв правой части, чтобы всегда открываться вниз, когда родительский div использует «flex-direction: column»?

var acc = document.getElementsByClassName("label");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}

.stuff {
  background: #ebeef2;
}

.container {
  display: flex;
  flex-direction: column;
}

.left,
.right {
  width: 100%;
}

.left {
  order: 2;
  background: blue;
}

.right {
  order: 1;
  background: green;
}

.label {
  font-size: 2em;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
  padding: 1em;
  box-sizing: border-box;
}

.content.show {
  opacity: 1;
  max-height: 100%;
}

.label:after {
  content: '+';
  font-size: 32px;
  right: 10px;
  top: 0;
  position: absolute;
  font-weight: 100;
}

.label.active:after {
  content: '-';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stuff">In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex.
  An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi.
  Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu,
  in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis
  ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii
  facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae
  mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel
  eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti
  eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed.</div>

<div class="container">
  <div class="left">Left Side</div>
  <div class="right">
    <div class="label">Label 1</div>
    <div class="content">Content 1</div>

    <div class="label">Label 2</div>
    <div class="content">Content 2</div>

    <div class="label">Label 3</div>
    <div class="content">Content 3</div>

    <div class="label">Label 4</div>
    <div class="content">Content 4</div>
  </div>
</div>

<div class="stuff">In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex.
  An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi.
  Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu,
  in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis
  ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii
  facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae
  mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel
  eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti
  eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed.</div>