two <details> next to each other but not affecting the other when opened

Question

I'd like to use two details items next to each other using html. However, when I open the first details item, the second item moves to the end of the summary inside the first details item. Is there a way to prevent this?

Here is what I tried:

<div style="display:flex;flex-direction: center;column-gap: 20px">
  <details>
    <summary>Item 1</summary>
    This is a long summary. It's actually even longer.
  </details>
  <details>
    <summary>Item 2</summary>
    This is another long summary. It's actually even longer.
  </details>
</div>

How it looks when it's closed.

When I open it, the second item moves to the end of the summary text. I'd like to keep it where it stands in closed form.

Desired Result:

Answer 1

Easy fix! You can use various methods, but a straightforward solution is to utilize a grid container. Just place both items inside and apply the appropriate CSS to style and align them within the grid.

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 300px; 
    gap: 10px;
  }
</style>

<div class="container">
  <div class="grid-item">
    <details>
      <summary>Item 1</summary>
      This is a long summary. It's actually even longer.
    </details>
  </div>
  <div class="grid-item">
    <details>
      <summary>Item 2</summary>
      This is another long summary. It's actually even longer.
    </details>
  </div>
</div>

---