Use details and summary tags as collapsible inline elements

Issue

I'm working to study a solution to this problem:

find a way to implement collapsible buttons (or other similar objects) such that

1. they can be used in the same line
2. when clicked, their content is showed between the line where the buttons lie and the next line
3. they are responsive
4. style the content independently from the title

I made this gif to better understand what I would like to obtain

Until now I tried with collapsible objects and with details/summary tags.

It seems that by using collapsible objects it is only possible to achieve the features number 2. and number 4. In fact, since the content (div class) has to placed manually somewhere in the text (so in a fixed place), I don't know how it would be possible to achieve the responsiveness. Same about the point 1., if two buttons are placed in the same line and the two contents are placed in the next line, the second button will use the first content that it will find, but the first button and the second content cannot be used.

Here is some code about collapsible objects

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 {
  border: none;
  background: none;
  outline:none;
  padding: 0;
  font-size: 1em;
  color: green;
    }

.ccontent {
  max-height: 0;					
  overflow: hidden;
  background-color: #d3d3d3;
    }

Does <button class="collapsible">this</button> work?
<div class="ccontent">Yes!</div>
Good job!
<hr>
Does <button class="collapsible">this</button> and <button class="collapsible">this</button> work?
<div class="ccontent">no</div><div class="ccontent">yes</div>
Ops

Details/summary tags are very easy to implement, but harder to style.

It seems that by using them it is only possible to achieve the feature numbers 1. and number 3., and partially the number 4. In fact, for example, the background color of the details affects also the one of the summary. Moreover, when setting display: inline, performing a click on the summary move the text around it in the next line.

details {
  display: inline;
  color: red;
  padding: 0;
  background-color: #d3d3d3;
  cursor: help;
  
}
details > summary {
  display: inline;
  background: none;
  color: green;
  list-style: none; /* to remove triangle */
  outline:none; /* to remove blue border */
}
details > summary::-webkit-details-marker { /* to remove triangle */
  display: inline;
  display: none;
}

Does <details><summary>this</summary>so and so</details> work?
<p>Ops</p>
<hr>
Does <details><summary>this</summary>not</details> and <details><summary>this</summary>fully</details> work?
<p>Ops</p>

Recap: collapsible buttons have features 2 and 4, details/summary tags have features 1 and 3 (combining the two objects would do the job!).

Is it possible to obtain all 4 features with only one element?

Solution

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>

Answered By - Hans Gustavson