title: Float dropdown elements push each other to the right
body: <p>I'm working on a project where there are multiple dropdowns on one page. To get these dropdowns in order I use float left, the problem is that when I open one of the dropdowns on the left it pushes some of them to the right. What needs to happen is that the dropdowns underneath the open dropdown need to move down, and not to the other side.</p>
  
  <p>I have tried to use "clear: both" and "Overflow: auto", but these didn't work.</p>
  
  <p>Here is a JSFiddle: <a href="https://jsfiddle.net/p85ga09f/" rel="nofollow noreferrer">https://jsfiddle.net/p85ga09f/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var acc = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  }
  
  .accordion_holder {
    border-bottom: 1px dashed #eaeaea;
    width: 48%;
    float: left;
    margin: 0 1%;
  }
  
  .accordion {
    background-color: #fff;
    color: #444;
    cursor: pointer;
    padding: 18px;
    padding-bottom: 30px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.125rem;
    font-weight: 200;
    transition: 0.4s;
  }
  
  .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }
  
  li {
    line-height: 28px;
  }
  
  i {
    margin-right: 10px;
  }
  
  li,
  a {
    color: #FF4212;
    text-decoration: none;
  }
  
  ul {
    margin: 0;
    margin-bottom: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
    &lt;div class="accordion_holder"&gt;
      &lt;button class="accordion"&gt;
        Placeholder 1
      &lt;/button&gt;
      &lt;div class="panel"&gt;
        &lt;ul&gt;
          &lt;a href="#" target="_parent"&gt;
            &lt;li&gt;test&lt;/li&gt;
          &lt;/a&gt;
          &lt;a href="#" target="_parent"&gt;
            &lt;li&gt;tset&lt;/li&gt;
          &lt;/a&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion_holder"&gt;
      &lt;button class="accordion"&gt;
        Placeholder 2
      &lt;/button&gt;
      &lt;div class="panel"&gt;
        &lt;ul&gt;
          &lt;li&gt;
            test
          &lt;/li&gt;
          &lt;li&gt;
            test
          &lt;/li&gt;
          &lt;li&gt;
            test
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion_holder"&gt;
      &lt;button class="accordion"&gt;
        Placeholder 3
      &lt;/button&gt;
      &lt;div class="panel"&gt;
        &lt;ul&gt;
          &lt;li&gt;
            test
          &lt;/li&gt;
          &lt;li&gt;
            test
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The dropdowns need to stay on their rows and columns. </p>
  
  <p>Any help would be appreciated.</p>