JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <details>
    <summary>test summary 1</summary>
    <div>test detail 1</div>
    <div>test detail 2</div>
   </details>
   <details>
    <summary>test summary 2</summary>
    <div>test detail 3</div>
    <div>test detail 4</div>
    <details>
     <summary>very unnessesarily really extremelly long named test summary 3</summary>
     <div>test detail 5</div>
     <div>test detail 6</div>
    </details>
   </details>
</main>

CSS

main { overflow: auto; white-space: nowrap; max-width: fit-content; resize: horizontal; height: 200px; border: 1px solid black; }