<div class="container">
  <div class="element">
    Content
    <div class="element__width"></div>
    <div class="element__height"></div>
  </div>
  <div class="control control__top">
    <label for="padding__top">padding-top:</label>
    <input type="range" id="padding__top" name="padding" min="-100" max="100" value="0" step="5">
    <span id="padding__top--per">0%</span>
    (<strong id="padding__top--pix">0px</strong>)
  </div>
  <div class="control control__right">
    <label for="padding__right">padding-right:</label>
    <input type="range" id="padding__right" name="padding" min="-100" max="100" value="0" step="5">
    <span id="padding__right--per">0%</span>
    (<strong id="padding__right--pix">0</strong>)
  </div>
  <div class="control control__bottom">
    <label for="padding__bottom">padding-bottom:</label>
    <input type="range" id="padding__bottom" name="padding" min="-100" max="100" value="0" step="5">
    <span id="padding__bottom--per">0%</span>
    (<strong id="padding__bottom--pix">0px</strong>)
  </div>
  <div class="control control__left">
    <label for="padding__left">padding-left:</label>
    <input type="range" id="padding__left" name="padding" min="-100" max="100" value="0" step="5">
    <span id="padding__left--per">0%</span>
    (<strong id="padding__left--pix">0px</strong>)
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  font-size: 100%;
  letter-spacing: 0.1rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-blend-mode: hue;
}

.container {
  width: 500px;
  height: 300px;
  display: flex;
  position: relative;
  box-shadow: 0 0 2px 0 #f36;
  justify-content: center;
  align-items: center;
}

.container::before {
  content: "width: 500px";
  position: absolute;
  bottom: 100%;
  right: 0;
}

.container::after {
  content: "height: 200px";
  position: absolute;
  left: 100%;
  top: 50%;
  white-space: nowrap;
  transform: translate(-40%, -50%) rotate(90deg);
}

.actions {
  padding: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  font-size: 2rem;
  margin-top: auto;
}

label:nth-of-type(2) {
  margin-left: 20px;
}

:root {
  --padding-top: 0;
  --padding-right: 0;
  --padding-bottom: 0;
  --padding-left: 0;
}

.element {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-image: linear-gradient(to right, #f36, #f36),
    linear-gradient(to right, #09f, #09f);
  background-clip: content-box, padding-box;
  background-origin: content-box, padding-box;
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom)
    var(--padding-left);
  position: relative;
}

strong {
  color: #f89;
}

.control {
  position: absolute;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.control__top {
  left: 0;
  right: 0;
  bottom: calc(100% + 5px);
}

.control__bottom {
  left: 0;
  right: 0;
  top: calc(100% + 5px);
}

.control__right {
  top: 0;
  bottom: 0;
  left: 80%;
  transform: rotate(90deg);
}

.control__left {
  top: 0;
  bottom: 0;
  right: 75%;
  transform: rotate(-90deg);
}

.element > div {
  position: absolute;
}

.element__width {
  left: 0;
  right: 0;
  bottom: calc(100% + 5px);
}

.element__height {
  top: 0;
  bottom: 0;
  left: -30px;
  transform: rotate(90deg);
}

const rangePaddingTop = document.getElementById("padding__top");
const rangePaddingRight = document.getElementById("padding__right");
const rangePaddingBottom = document.getElementById("padding__bottom");
const rangePaddingLeft = document.getElementById("padding__left");

const paddingTopPerVal = document.getElementById("padding__top--per");
const paddingRightPerVal = document.getElementById("padding__right--per");
const paddingBottomPerVal = document.getElementById("padding__bottom--per");
const paddingLeftPerVal = document.getElementById("padding__left--per");

const paddingTopPixVal = document.getElementById("padding__top--pix");
const paddingRightPixVal = document.getElementById("padding__right--pix");
const paddingBottomPixVal = document.getElementById("padding__bottom--pix");
const paddingLeftPixVal = document.getElementById("padding__left--pix");

const containerElement = document.querySelector(".container");
const element = document.querySelector(".element");

const elementWidth = document.querySelector(".element__width");
const elementHeight = document.querySelector(".element__height");
const elementWidthValue = element.getBoundingClientRect().width;
const elementHeightValue = element.getBoundingClientRect().height;

const containerElementRectWidth = containerElement.getBoundingClientRect()
  .width;

elementWidth.textContent = `${elementWidthValue}px`;
elementHeight.textContent = `${elementHeightValue}px`;

rangePaddingTop.addEventListener("change", (etv) => {
  element.style.paddingTop = `${etv.target.value}%`;

  const elementHeightValue = element.getBoundingClientRect().height;
  elementHeight.textContent = `${elementHeightValue}px`;

  const paddingTopRangeValue = etv.target.value;
  const paddingTopPixValue =
    (paddingTopRangeValue * containerElementRectWidth) / 100;

  paddingTopPerVal.textContent = `${paddingTopRangeValue}%`;
  paddingTopPixVal.textContent = `${paddingTopPixValue}px`;
});

rangePaddingRight.addEventListener("change", (etv) => {
  element.style.paddingRight = `${etv.target.value}%`;

  const elementWidthValue = element.getBoundingClientRect().width;
  elementWidth.textContent = `${elementWidthValue}px`;

  const paddingRightRangeValue = etv.target.value;
  const paddingRightPixValue =
    (paddingRightRangeValue * containerElementRectWidth) / 100;

  paddingRightPerVal.textContent = `${paddingRightRangeValue}%`;
  paddingRightPixVal.textContent = `${paddingRightPixValue}px`;
});

rangePaddingBottom.addEventListener("change", (etv) => {
  element.style.paddingBottom = `${etv.target.value}%`;

  const elementHeightValue = element.getBoundingClientRect().height;
  elementHeight.textContent = `${elementHeightValue}px`;

  const paddingBottomRangeValue = etv.target.value;
  const paddingBottomPixValue =
    (paddingBottomRangeValue * containerElementRectWidth) / 100;

  paddingBottomPerVal.textContent = `${paddingBottomRangeValue}%`;
  paddingBottomPixVal.textContent = `${paddingBottomPixValue}px`;
});

rangePaddingLeft.addEventListener("change", (etv) => {
  element.style.paddingLeft = `${etv.target.value}%`;

  const elementWidthValue = element.getBoundingClientRect().width;
  elementWidth.textContent = `${elementWidthValue}px`;

  const paddingLeftRangeValue = etv.target.value;
  const paddingLeftPixValue =
    (paddingLeftRangeValue * containerElementRectWidth) / 100;

  paddingLeftPerVal.textContent = `${paddingLeftRangeValue}%`;
  paddingLeftPixVal.textContent = `${paddingLeftPixValue}px`;
});