How to set the height of <summary> in a group of <Disclosure>s (what contains the <details>) to the tallest <summary> of the group using an enclosing component like <DisclosureGroup>?
A CodeSandbox to get the problem in detail can be found here: https://codesandbox.io/s/details-summary-equal-height-d6fh7
It's not ideal but here is one way to do it. Basically if you position: absolute; the <div> inside <details> then it doesn't take up space.
section {
display: grid;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
details div {
position: absolute;
}
summary {
box-sizing: border-box;
height: 100%;
padding: 20px;
background: lightblue;
}<main>
<section>
<details>
<summary>First Title</summary>
<div>
<p>Whateva</p>
</div>
</details>
<details>
<summary>Very long title at the second disclosure to show the problem</summary>
<div>
<p>
Whateva<br/>
a<br/>
b<br/>
c<br/>
d<br/>
e<br/>
f<br/>
g<br/>
h<br/>
i<br/>
j
</p>
</div>
</details>
<details>
<summary>Third title not as long as the second</summary>
<div>
<p>Whateva</p>
</div>
</details>
</section>
</main>