CSS-Only Closeable Toast

Without using javascript, presents a toast with a close button

HTML

<input hidden type="checkbox" id="this-checkbox">
<div class="close-on-check">
  <div class="display-container"> 
    <p>
    Toast message here!
    </p>
    <label for="this-checkbox">
      X
    </label>
  </div>
</div>

CSS

.display-container {
  background-color: lightgray;
  padding: 1em;
  max-width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

label {
  padding: 4px 8px;
  border-radius: 3px;
  background-color: white;
}

label:hover {
  background-color: gray;
}

input[type=checkbox]:checked + .close-on-check {
  display: none;
}