Css: summary jako inline-block, details pod sebou

Zdravím,
V HTML kódu mám několik rozklikávacích <details>, jejichž <summary> mají defaultně display:block, což znamená, že dají rozliknout z celé šířky stránky, ať už je <summary> jakkoli dlouhé/široké.
Jak docílit, aby se <details> mohl rozkliknout pouze po délce <summary> (tj. kliknutím na jejich 'nadpis') a současně zůstaly <details> pod sebou?

Kód:

display {
    display: inline-block;
}

(očekávaně) způsobí, že <details> budou za sebou, já je potřebuji pod sebou. Zkoušel jsem:

Kód:

display::after {
    content: "\a";
    white-space: pre;
}

, to samé pro <summary>, všechny kombinace mezi tím, a nic nezafungovalo.
Díky za rady.

Já možná nepochopil cíl nebo zadání ... ale když dám display: inline-block na summary tak jde kliknout jen na nadpis a furt je vše pod sebou. Není tohle o chceš?

ukázka: https://jsfiddle.net/pamare/6v5d2agp/

Původně odeslal crs ↪

Zdravím,
V HTML kódu mám několik rozklikávacích <details>, jejichž <summary> mají defaultně display:block, což znamená, že dají rozliknout z celé šířky stránky, ať už je <summary> jakkoli dlouhé/široké.
Jak docílit, aby se <details> mohl rozkliknout pouze po délce <summary> (tj. kliknutím na jejich 'nadpis') a současně zůstaly <details> pod sebou?

Moc moudrej z toho popisu nejsem, chtělo by to vidět.
Nepomůže display:flex a flex-direction? (střelba hodně od boku :)

Díky za odpovědi.
@Doctore97: Z nějakého důvodu mi to začalo fungovat :), ale současně se ztratily šipečky/trojúhelníčky ukazující doprava nebo dolů podle toho, jestli je obsah rozkliknutý nebo ne.
HTML má defaultně pro details a summary nastaveno vlastnosti:

Kód:

details {
  display: block;
}
details > summary {
  display: list-item;
  counter-increment: list-item 0;
  list-style: inside disclosure-closed;
}
details > summary {
  list-style: inside disclosure-open;
}

Změnou display: list-item na inline nebo inline-block se „ztratí vliv“ list-style (a možná ještě nějakých vlastností, co se seznamy souvisí).

Toto se dá ale spravit pomocí ::before a content - napíšu sem své řešení pro někoho, kdo by to třeba v budoucnu řešil —

Kód:

summary::before {
  content: "\25BA";
  padding-right: 1ex;
}
details[open] > summary::before {
  content: "\25BC";
}

Já ještě navíc mám uvnitř summary nadpisy (které samy o sobě před šipkami odsazují), ale stačí danému nadpisu přiřadit display: inline-block.