<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 {
  
  display: inline-grid;
  anchor-name: --wrapper;

  details[open] {
      
    summary,
    &::details-content {
      background: #eee;
    }

    &::details-content {
      position: absolute;
      position-anchor: --wrapper;
      top: anchor(top);
      left: anchor(right);
    }
    
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.