Can I update a Math Variable in CSS elsewhere in the script

Question

I am using a vertical menu in CSS with several variable. Under each "section" there are several sub menus as you would expect in a menu. When s section is selected, the menu slides the following sections down to create enough space for the sub menus list.

It works fine if I have the same number of sub menu items because I can specify the calc( ... to create the space distance.

The issue I am having is given there are differing numbers of sub menus for each section I am trying to set up a dynamic variable var(... to then pass the number of lines to the code that slides the menu down so that it will do this to different heights depending on the number of sub items.

I cannot seem to work out how to load and pass that variable to another equation to create that dynamic effect. Hope the above make sense..

Not sure of it even can be done within CSS and was hoping someone could enlighten me.

I've tried to add only what I think is relevant code.

Setting up the variable. Defaulting to 5 lines. Not using drop-height at the moment

:root {
--main-drop-lines:5;
--main-drop-height: calc(68px * var(--main-drop-lines));  // updated
}

Here the slide down section where the drop-lines are multiplied by the px space required per sub menu line, and want I want to be adjusted dynamically based on the number of sub menu lines.

input[type='radio']:checked + label {

height: calc(var(--main-drop-lines) * 68px);  /*700px; */  /*325px;  Height of drop separation between section titles */
background: #212e41;
text-indent: 4px;
-webkit-transition-property: height;
transition-property: height;
-webkit-transition-duration: .6s;
      transition-duration: .6s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

These are the section headings (just showing three here) and where I "think" it is appropriate to somehow load --main-drop-lines with the number of sub menu items so the above slide spacing code will dynamically adjust to the space required.

input[type='radio']:checked + label li:nth-of-type(1) {
-webkit-animation: in 0.15s 0.575s forwards;
      animation: in 0.15s 0.575s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.575s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(2){
-webkit-animation: in 0.15s 0.7s forwards;
      animation: in 0.15s 0.7s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.7s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(3) {
-webkit-animation: in 0.15s 0.825s forwards;
      animation: in 0.15s 0.825s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.825s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

First section heading and sub menu items, requiring only 3 lines of spacing

    <input id="Dashboard" name="radio" type="radio">
    <label for="Dashboard">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/dash.png">
    <span>Dashboard</span>
    <div class="lil_arrow"></div>
    <div class="bar"></div>
    <div class="swanky_wrapper__content">
    <ul>
    <li class="nav-item"><a href="../register/memberhome.asp" >Member Home</a></li>
    <li>Tools</li>
    <li>Reports</li>
    <li>Analytics</li>
    </ul>
    </div>
    </label>

Second sections heading with sub menu items, requiring 8 lines of spacing

    <input id="Medication" name="radio" type="radio">
    <label for="Medication">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/del.png">
    <span>Medication</span>
    <div class="lil_arrow"></div>
    <div class="bar"></div>
    <div class="swanky_wrapper__content">
    <ul>
    <li>Add Medication</li> 
    <li>View Medication</li> 
    <li>Medication History</li> 
    <li>Immunization</li> 
    <li>Illness Information</li> 
    <li>Files</li> 
    <li>Allergy</li> 
    <li>Procedure</li> 
    </ul>
    </div>
    </label>

and so on.

Just had a thought while typing this, perhaps it is possible to pass the expected line count from within the above HTML code back to the CSS to give it the number of lines to create the spacing for ? Rather than building it into the CSS directly ?

Thanks