using checkbox hack to close a dialog

I learned checkbox hack on stackoverflow the other day and I successfully applied it to making a dialog to open on click of a text. However, now I want to close the dialog when "X" is clicked. Below is what I have attempted up to now, but to no avail:

https://jsfiddle.net/gmcy12zv/5/

HTML

<div style="height:100px">

</div>

<div class="tooltip">
        <input type="checkbox" id="clickhere" />
        <label for="clickhere">
           <div class="click-msg">click here</div>
        </label>
        <div class="tooltiptext">
            <input type="checkbox" id="closeCheck"/>
            <label for="closeCheck">
              <div class="close">
                X
              </div>
            </label>
            <h1 class="tooltip-title">should open on click</h1>
            <p class="tooltip-msg"> close when X is clicked</p>
        </div>
</div>

I want "tooltiptext" to disappear when X button for div "close" is clicked.

CSS

#clickhere {
  display: none;
}

#clickhere:not(:checked) ~ .tooltiptext {
  display:none;
} 

#clickhere:checked ~ .tooltiptext {
  visibility: visible;
}

#closeCheck {
  display: none;
}

/* #closeCheck:not(:checked) ~.tooltiptext {
  visibility: visible;
} */

#closeCheck:checked ~.tooltiptext {
  display:none;
}

.click-msg{
 font-weight: 400;
font-size: 10px;
line-height: 20px;
}

.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
  font-weight: 400;
font-size: 10px;
line-height: 20px;
}

.tooltip .close{
  position: absolute;
  top: 5px;
  right: 5px;
}

.tooltip {
  text-align: right;
  position: relative;
  display: block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
}

/* .tooltip:hover .tooltiptext {
  visibility: visible;
} */

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  border-style: solid;
  border-width: 5px;
}

.tooltip .tooltiptext {
  width: 120px;
  bottom: 150%;
  left: 80%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  top: 100%;
  left: 90%;
  margin-left: -5px;
  border-color: black transparent transparent transparent;
}

where am I going wrong in my approach ? is this because two checkboxes are almost nexted?