<div class="flow">
  <div class="identical-radius" id="demo">
    <div class="identical-radius__inner">
    </div>
  </div>
</div>

.identical-radius {
  display: flex;
  flex-direction: column;
  width: 300px;
  aspect-ratio: 1/1;
  background: var(--color-light);
  border: 1px solid;
  padding: 1em;
  border-radius: 2em;
}

.identical-radius__inner {
  background: var(--color-primary);
  flex: auto;
  border: inherit;
  border-radius: 2em;
}

body {
  background: var(--color-dark);
  color: var(--color-light);
  font-family: sans-serif;
  display: grid;
  place-items: center;
  padding: 4rem 0;
}

const radiusControl = document.getElementById("radius");
const paddingControl = document.getElementById("padding");
const demoContainer = document.getElementById("demo");

const generate = () => {
  demoContainer.style.setProperty(
    "--matched-radius-padding",
    `${paddingControl.value}px`
  );
  demoContainer.style.setProperty(
    "--matched-radius-inner-size",
    `${radiusControl.value}px`
  );
};

radiusControl.addEventListener("input", generate);
paddingControl.addEventListener("input", generate);