2 buttons on the same line-CodePudding

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

this is the code:

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.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight   "px";
    }
  });
}

.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%;
}

<button >button</button>
<div >
  <p>text</p>
</div>

<button >button</button>
<div >
  <p>text</p>
</div>

CodePudding user response：

I'd suggest getting familiar with Flexbox. Based on what you're trying to achieve with your layout of buttons next to each other and corresponding text underneath the associated button, you'd be much better off thinking in terms of containers and items that go into those containers rather than trying to write specific CSS rules for every element. Your brain will thank you when it hurts less.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  width: 37%;
}

.button-container {
  display: flex;
}

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

<div >
  <div >
    <button >button</button>
    <div >
      <p>text</p>
    </div>
  </div>

  <div >
    <button >button</button>
    <div >
      <p>text</p>
    </div>
  </div>
</div>

Right now, those buttons are right up next to each other but I think you'll be able to take it from here.

CodePudding user response：

Put your HTML code in another div,

<div >

 <button >button</button>
 <div >
  <p>text</p>
 </div>

 <button >button</button>
 <div >
  <p>text</p>
 </div>

</div>

and add in CSS

.container {
 display: flex;
}