JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="stuff">
  <dt>title 1</dt>
    <dd>this is the first item (<label for="title1"><span>show</span></label>
<input type=radio id="title1" name="group">)
    <pre id="content1">
    Here is some formatted code corresponding to it
    I would like this part to be hidden by default
    But I would also like it to be copy and pastable
    </pre>
  </dd>
<dt>title 2</dt>
<dd> this is the second item (<label for="title2"><span>show</span></label>
<input type=radio id="title2" name="group">)
  <pre id="content2">
  Another lengthy description
  </pre>
  </dd>
</dl>

CSS

input {    display:none;}
pre#content1 {    display:none;}
pre#content2 {    display:none;}
input#title1:checked ~ pre#content1 { display:block;}
input#title2:checked ~ pre#content2 { display:block;}