JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="triggerVisibility"></input>
<div id="div1">
  <label for="triggerVisibility" id="label1"></label>
</div>
<div id="div2"></div>

CSS

body {
  font-size: 10px;
  font-family: sans-serif;
}

#div1 {
  height: 100px;
  width: 100px;
  background-color: orange;
}

#label1 {
  display: block;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

#label1:after {
  content: "DIV is hidden.... Click to show!"
}

#triggerVisibility {
  height: 0px;
  width: 0px;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
}

#div2 {
  height: 100px;
  width: 100px;
  background-color: blue;
  visibility: hidden;
}

#triggerVisibility:checked~#div1 #label1:after {
  content: "Hidden DIV visible. Click to dismiss"
}

#triggerVisibility:checked~#div2 {
  visibility: visible;
}