CSS only Checkbox Hack for Hiding and Displaying content

HTML

<div id="container">

<div>
  <input type="checkbox" id="label1">
  <h2><label for="label1">First Label</label></h2>
  <div id="pane">
    <p>Hide or display this text on click.</p>
  </div>
</div>

<div>
  <input type="checkbox" id="label2">
  <h2><label for="label2">Second Label</label></h2>
  <div id="pane">
    <p>Hide or display this text on click.</p>
  </div>
</div>

</div>

CSS

/* Styles for open/display and shut/hide CSS only pane of content */
#container div {
  position: relative;
}
input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
label {
  cursor: pointer;
}
label {
  position: relative;
  display: block;
  }
  
label::before {
  content: "";
  position: absolute;
  }

#pane {
  max-height: 0;
  overflow: hidden;
  transition: min-height 0.4s ease;
}
input[type="checkbox"]:checked ~ h2 ~ #pane {
  max-height: max-content;
}

#container h2 {
	border-bottom: 1px solid black;
}