<div class="flow">
  <div class="matched-radius" id="demo">
    <div class="matched-radius__inner">
    </div>
  </div>
  <div class="controls">
    <div>
      <label for="radius">Radius</label>
      <input type="range" id="radius" min="4" max="30" step="1" value="12" />
    </div>
    <div>
      <label for="padding">Padding</label>
      <input type="range" id="padding" min="4" max="16" step="1" value="8" />
    </div>
  </div>

</div>

.matched-radius {
  --matched-radius-padding: 8px;
  --matched-radius-inner-size: 12px;

  display: flex;
  flex-direction: column;
  width: 300px;
  aspect-ratio: 1/1;
  background: var(--color-light);
  border: 1px solid;
  padding: var(--matched-radius-padding);
  border-radius: calc(
    var(--matched-radius-inner-size) + var(--matched-radius-padding)
  );
}

.matched-radius__inner {
  background: var(--color-primary);
  flex: auto;
  border: inherit;

  border-radius: var(--matched-radius-inner-size);
}

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

.matched-radius {
  margin-inline: auto;
}

/* Form controls */

.controls {
  --flow-space: 4rem;
  line-height: 1;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 4rem;
  width: clamp(16rem, 90vw, 50rem);
  background: var(--color-quinary);
  padding: 2rem;
}

.controls > div {
  display: flex;
  flex: auto;
  flex-wrap: wrap;
  gap: 1rem;
}

.controls input {
  flex: auto;
}

.controls label {
  flex-basis: 20%;
}

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);