title: 2 buttons on the same line
body: <p>I just cant get them on the same line, anyone know what I can do?
  I'm trying to put both buttons on the top line and both expand under them
  I've looked at a couple other posts about this (display:inline-block;, etc, might have put them in thr wrong spot though) but I cant seem to get any of it working</p>
  <p>this is the code:</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 coll = document.getElementsByClassName("collapsible");
  var i;
  
  for (i = 0; i &lt; coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 40%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
  }
  
  .active,
  .collapsible:hover {
    background-color: #555;
  }
  
  .button {
    display: inline;
  }
  
  .content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
    width: 37%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="collapsible"&gt;button&lt;/button&gt;
  &lt;div class="content"&gt;
    &lt;p&gt;text&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;button class="collapsible"&gt;button&lt;/button&gt;
  &lt;div class="content"&gt;
    &lt;p&gt;text&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>