Is it possible to set an element's CSS value by another element's value?

Question

Say I have this code:

<div style="width:100%" id="a"></div>
<div id="b"></div>

I want the #b's height to equal #a's width and always following that value.

What I can do is to use JS to get #a's width and set it to #b's height.

However, is there any pure CSS way to do so, something like this:

#b {
  height:getvalue('#a', 'width');
}

Answer 1

As Sangam Belose said setting both values in css is a valid option. You could define a variable in :root and access it from everywhere:

root:{
   --lenght: 100vw;
}
#a{
   width: var(--lenght);
}
#b{
   height: var(--lenght);
}

Unfortunally you would need JS to change this variable but most of the time there is a workaround for this like using aspect ratio.