How to make the block increased in size when the switch is pressed(input radio)?

The situation is this: there are 3 blocks, the first has switches(radio buttons) labelы which acquire the style specified in the code when clicking on the text. Other 2 units are below and should increase in size when you press the switch. Not much kick I'm a beginner(self-taught), I can not figure out how to do it, tried but the design doesn't work. Here is the code and screenshots:

<div id="pricing" class="offer">
 <div class="container">
 <div class="offer-section">
 <!-- The switch block -->
 <div class="block-1 choose-block">
 <h3 class="title">Choose your perfect plan</h3>
 <span>you are</span>
 <form class="switcher">
 <input type="radio" id="individual" name="check" checked>
 <label class="switch-btn-1" for="individual">Individual</label>
 <input type="radio" id="company" name="check">
 <label class="switch-btn-2" for="company">Company</label>
</form>
 <p>Thus much I thought proper to tell you in relation to yourself, and to the trust I reposed in you.</p>
 <p>Have a bigger team? <a href="#">Let's talk</a></p>
</div>

 <div class="block-2 plan-block plan-1">
 <span class="title">Starter</span>
<span>Free</span>
 <p>Build your schedule<br> every day</p>
 <ul class="advantages">
 the <li>Unlimeted events</li>
 the <li>Connect to Dropbox & Evernote</li>
</ul>
 <a href="#" class="btn">Get started</a>
</div>

 <div class="block-3 plan-block plan-2">
 <span class="title">Pro</span>
<span>$4.99</span>
 <p>Make your life<br> better.</p>
 <ul class="advantages">
 the <li>Unlimeted events</li>
 the <li>Connect to Dropbox & Evernote</li>
 the <li>Personal Assistant</li>
 </ul >
 <a href="#" class="btn">Make me a Pro</a>
</div>

</div>
</div>
 </div>


.offer .switcher {
 display: flex;
 width: 258px;
 height: 48px;
 flex-direction: row;
 border: 1px solid #d9dcde;
 justify-content: space-between;
 padding: 0 4px;
 margin-top: 9px;
 border-radius: 25px;
}

.switcher label {
 align-self: center;
 font-size: 16px;
 padding: 0 30px;
 margin-top: -3px;
 line-height: 40px;
 vertical-align: middle;
}

#individual:checked ~ .switch-btn-1,
#company:checked ~ .switch-btn-2 {
 width: 120px;
 height: 42px;
 font-weight: bold;
 text-align: center;
 margin-top: 0;
 border-radius: 21px;
 color: #000;
 background-color: #fff;
 box-shadow: 10px 20px 30px 5px rgba(0, 0, 0, 0.15);
}

.offer-section .plan-block {
 position: relative;
 width: 340px;
 height: 510px;
 border-radius: 10px;
}
/*These switches must increase blocks, each*/
#individual:checked ~ .offer-section .block-2, 
#company:checked ~ .offer-section .block-3 {
 width: 340px;
 height: 550px; 
}

5cfcc6009fd35140055040.jpeg
March 23rd 20 at 19:43
1 answer
March 23rd 20 at 19:45
in jquery code I need to write

Find more questions by tags LayoutHTMLCSS