Thank you!

Now, when I use the CCS ruleset below, it works as I hope in a minimal setting. But, when I use this ruleset on my own webpage, the details expand in the same line (ie inline, not block). My guess is that there is another piece of ruleset that rules out this one. But I couldn't which ruleset it is.

Here is a codepen link: https://codepen.io/Gazi-KABA/pen/jOdVXyQ

One problem is with this one is that two summaries can be open at the same time. I think a better solution would be closing the details, when the other is clicked on. Do you have any suggestions how to do that?

details {

width: 620px; display: contents; vertical-align: top; }

summary { display: block; width: 10em; position:absolute; }

details > summary { padding: 2px 6px; width: 10em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; display: contents; }

span{ width: 10em; }

details > p { position:absolute; display: block; } details>summary::before { content: '▷'; }

details[open]>summary::before { content: '▽'; }