Any way to link "checkbox" to an element in another container (only HTML/CSS)

Question

I've this structure where I have to toggle pricing plan between monthly and annually. I have edited the question to provide the css with only necessary code-

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  text-align: center;
  background: #f6f6fe;
}

.cards-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 50px auto;
}

.card {
    flex: 0 0 250px;
    padding: 30px 3vw;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px #b3b5c633;
}

/* SWITCH */
.switch {
	margin: auto 10px;
	display: inline-block;
	width: 45px;
	height: 22px;
	border: none;
	background: linear-gradient(#a3a8f0, #696fdd);
	position: relative;
	vertical-align: middle;
}

.switch .slider {
	margin: 3px;
	display: inline-block;
	height: 16px;
	width: 16px;
	position: absolute; top: 0; bottom: 0; left: 0;
	background: #f5f7ff;
	-webkit-transition: all 0.2s cubic-bezier(0, 0.9, 0.99, 1);
	transition: all 0.2s cubic-bezier(0, 0.9, 0.99, 1);
}
.switch, .switch .slider {
	border-radius: 20px;
}

/* Switch pricing plan */
.switch>input:checked+.slider {
	transform: translateX(23px);
}

<small>Annually</small>
<label class="switch">
		<input type="checkbox" style="display: none;"></input>     <!-- Checkbox to link -->
		<span class="slider"></span>
	</label>
<small>Monthly</small>

<div class="cards-container">

  <div class="card side-card">
    <h3>Basic</h3>
    <h1 class="monthly" style="display: none">$19.99</h1>    <!-- Element to link to -->
    <h1 class="annually">$199.99</h1>    <!-- Element to link to -->
    <hr>
    <h4>500 GB Storage</h4>
    <hr>
    <h4>2 Users Allowed</h4>
    <hr>
    <h4>Send up to 3 GB</h4>
    <hr>
    <a>Learn More</a>
  </div>
</div>

I want to show/hide the corresponding h1 tag based the state of checkbox. The problem is I don't have to use any sort of script here.

I tried using body:has(input:checked) .card .monthly {...} etc., but as listed on mdn, it has no support from browsers.

What else is possible?

Answer 1

If you can omit the <label> in HTML, you can link the checkbox to the corresponding <h1> tag.

h1.monthly {
  display: none;
}

input[type=checkbox]:checked ~ div.cards-container h1.monthly {
  display: block;
}

<!--<label class="switch">-->
		<input type="checkbox" style="display: block;">     <!-- Checkbox to link -->
		<span class="slider"></span>
<!--</label>-->
<small>Monthly</small>

<div class="cards-container">

  <div class="card side-card">
    <h3>Basic</h3>
    <h1 class="monthly">$19.99</h1>
    <!-- Element to link to -->
    <h1 class="annually">$199.99</h1>
    <!-- Element to link to -->
    <hr>
    <h4>500 GB Storage</h4>
    <hr>
    <h4>2 Users Allowed</h4>
    <hr>
    <h4>Send up to 3 GB</h4>
    <hr>
    <a>Learn More</a>
  </div>
</div>