<div>
  
  <details name="starWars" open>
    <summary>Prequels</summary>
    <ul>
      <li>Episode I: The Phantom Menace</li>
      <li>Episode II: Attack of the Clones</li>
      <li>Episode III: Revenge of the Sith</li>
    </ul>
  </details>

  <details name="starWars">
    <summary>Originals</summary>
    <ul>
      <li>Episode IV: A New Hope</li>
      <li>Episode V: The Empire Strikes Back</li>
      <li>Episode VI: Return of the Jedi</li>
    </ul>
  </details>

  <details name="starWars">
    <summary>Sequels</summary>
    <ul>
      <li>Episode VII: The Force Awakens</li>
      <li>Episode VIII: The Last Jedi</li>
      <li>Episode IX: The Rise of Skywalker</li>
    </ul>
  </details>
  
</div>

div {
  
  gap: 1ch;
  display: flex;
  position: relative;

  details {
    
    min-height: 106px; /* Prevents content shift */
      
    &[open] summary,
    &[open]::details-content {
      background: #eee;
    }

    &[open]::details-content {
      left: 0;
      position: absolute;
    }
    
  }
  
}