Use Details And Summary Tags As Collapsible Inline Elements

I'm working to study a solution to this problem: find a way to implement collapsible buttons (or other similar objects) such that they can be used in the same line when clicked

Solution 1:

Does something like this work for you?

It works by positioning the details absolute (you give them no top, so top is where it would be without absolute) Then adding margin-bottom to the collapsible and negative margin-top to the details-element

.container {
  position:relative;
  margin:2em;
}
.details {
  display:none;
}
.collapsible.onactive:active,
.collapsible.onfocus:focus,
.collapsible.ontoggle:focus
{
  margin-bottom:1.5em;
}
.collapsible.ontoggle:focus {
    pointer-events:none;
}

.collapsible.onactive:active + .details, 
.collapsible.onfocus:focus + .details, 
.collapsible.ontoggle:focus + .details 
{
  display:block;
  margin-top:-1.15em;
  position:absolute;
  left:0;
  right:0;
  background:yellow;
}

<div class=container>

    Does 
    <button class="collapsible onactive">on active</button><span class=details>Yes!</span>
    work? Good job!work? Good job!work? Good job!work? Good job!work? Good job!
    <button class="collapsible onfocus">on focus</button><span class=details>Yes!</span>
    work? Good job!work? Good job!work? Good job!work? Good job!work? Good 
    job!work? Good job!work? 
    <button class="collapsible ontoggle">toggle</button><span class=details>Yes!</span>
    Good job!work? Good job!work? Good job!work? Good job!

</div>