CSS Column Related Issue

Question

I have 4 divs with name div1,div2,div3,div4

The sequence of div is like div1 on left hand side then div2 on right hand side and div3 just below to div1 and div4 just below to div2. The problem which i am facing is that whenever i click on div1 its get expand and at the same time div4 lost their position which i dont want same for if I click on div2 its get expanded and div3 lost their position. Attaching jsfiddle link and screenshot as well

* {
  margin: 0;
  padding: 0;
}

#container {
  margin-left: 195px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
}

.body-titles {
  width: 100%;
  text-align: center;
  margin-top: 50px;
  padding: 20px;
  color: #868243;
  font-size: 28px;
  font-weight: 500;
  text-transform: uppercase;
}

.tile {
  background-color: #5b5828;
  color: #160f02;
  text-align: center;
  border: solid #160f02;
  border-width: 4px;
  width: 240px;
  margin: 15px;
  font-size: 13px;
  font-weight: 600;
}

.accordion {
  background-color: #868243;
  color: #160f02;
  font-size: 15px;
  cursor: pointer;
  padding: 8px;
  margin-top: 10px;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
}

.accordion:hover {
  background-color: #a19d58;
}

.panel {
  display: none;
  overflow: hidden;
}

.panel p {
  margin: 10px 10px 20px 10px;
}

<div id="container">
  <section class="tile" id="id1">
    <h2>Div 1</h2>
    <p>Lorem Ipsum</p>
    <button class="accordion">Description</button>
    <div class="panel">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum dolor sit amet, consectetur adipiscing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </section>
  <section class="tile" id="id2">
    <h2>Div 2</h2>
    <p>Lorem Ipsum</p>
    <button class="accordion">Description</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </section>
  <section class="tile" id="id3">
    <h2>Div 3</h2>
    <p>Lorem Ipsum</p>
    <button class="accordion">Description</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </section>
  <section class="tile" id="id4">
    <h2>Div 4</h2>
    <p>Lorem Ipsum</p>
    <button class="accordion">Description</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </section>
  <script type="text/javascript">
    var acc = document.getElementsByClassName("accordion");

    for (var i = 0; i < acc.length; i++) {

      acc[i].addEventListener("click", function() {
        panel = this.nextElementSibling;

        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";

        }
      });
    }
  </script>
</div>