How to add two css variables and assign it to another variable

Question

I have a scenario in which I need to add values(in pixels) and assign them to another variable and reuse this new variable in CSS.

Expected: width and height should use variable values of --width and --height respectively

But currently, the expected behavior is not observed. ( run the code snippet to see this )

.div {
  --a: 200px;
  --b: 100px;
  
  --width: calc(var(--a)+var(--b));
  --height: calc(var(--a)-var(--b));

  width: var(--width);
  height: var(--height);

  background-color: green;
}

<div class="div">Styles are not being applied on me. I need to be more taller and wider according to CSS. </div>