How to make horizontal collapsible dropdown?

Question

Im not good at coding but I was wondering how to make horizontal collapsible dropdown? The issue I am having is that when I click on Section 2 and 3, it opens under Section 1. Is there a way to fix this?

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.collapsible {
  display: inline-block;
  color: black;
  cursor: pointer;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  outline: none;
  font-size: 15px;
}

.center {
  margin: auto;
  width: 50%;
}

.content {
  display: none;
  color: black;
  cursor: pointer;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  outline: none;
  font-size: 15px;
}

<h2>Collapsibles</h2>

<div class="center">
  <p>Collapsible Set:</p>
  <button type="button" class="collapsible">Section 1</button>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
  </div>
  <button type="button" class="collapsible">Open Section 2</button>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
  </div>
  <button type="button" class="collapsible">Open Section 3</button>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
  </div>
</div>

I would like for each content to open under the correct section.

Answer 1

Basically main thing what I did was to add each <button class="collapsible"> with <div class="content"> to its wrap <div class="wrap">. This did the thing. Then I just used flexbox for better positioning of elements, but the wrap itself caused that the content was under the correct button.

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.collapsible, .content {
  display: block;
  color: black;
  cursor: pointer;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  outline: none;
  font-size: 15px;
}

.center {
  display: flex;
  width: 620px;
}

.content {
  display: none;
  width: 196px;
  margin-top: 1px;
}

.wrap {
  display: inline-block;
  flex: 1;
}

<h2>Collapsibles</h2>

<div class="center">
  <div class="wrap">
    <button type="button" class="collapsible">Section 1</button>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
  </div>
  <div class="wrap">
    <button type="button" class="collapsible">Open Section 2</button>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
  </div>
  <div class="wrap">
    <button type="button" class="collapsible">Open Section 3</button>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
  </div>
</div>