JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="foo">
<label for="foo">foo</label>
<br/>
<br/>
<span class="bar">bar</span>&nbsp;<input type="checkbox" id="bar"><label id="close" for="bar">x</label>

CSS

#foo,
#bar,
span.bar,
[for="bar"] {
  display: none;
}
[for="foo"]:hover ~ [for="bar"],
#foo:checked ~ [for="bar"],
[for="foo"]:hover ~ .bar,
#foo:checked ~ .bar {
  display: inline-block;
}
[for="bar"] {
  color: red;
}
/*
#close {
  color: black;
}
*/

JavaScript

$(function() {
  $("#bar").change(function() {
    if (this.checked) {
      $(this).hide().add("#foo").prop("checked", false);
    }
  });

  $("#foo").change(function() {
    if (this.checked) {
      $("[for=bar]").css("display", "inline-block !important");
    }
  });
});