<div class="sandbox">
  <div class="options">
    <pre>
#no2 {
  margin:&nbsp;<select class="top">
        <option value="-10px">-10px</option>
        <option value="0" selected>0</option>
        <option value="10px">10px</option>
        <option value="25px">25px</option>
      </select> <select class="right">
        <option value="-10px">-10px</option>
        <option value="0" selected>0</option>
        <option value="10px">10px</option>
        <option value="25px">25px</option>
      </select> <select class="bottom">
        <option value="-10px">-10px</option>
        <option value="0" selected>0</option>
        <option value="10px">10px</option>
        <option value="25px">25px</option>
      </select> <select class="left">
        <option value="-10px">-10px</option>
        <option value="0" selected>0</option>
        <option value="10px">10px</option>
        <option value="25px">25px</option>
      </select> 
}
</pre>
  </div>

  <div class="content">
    <div class="element no1">1</div><div class="element no2">👉 2 👈</div><br><div class="element no3">3</div>
  </div>

</div>

.element {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: inherit;
  width: 100%;
  box-sizing: border-box;
  font-size: min(6vmin, 19px);
}

@media (min-height: 526px) {
  .element { height: 50px; }
}
View Compiled 
const selectList = document.querySelectorAll('select');
const t = document.querySelector('.top');
const r = document.querySelector('.right');
const b = document.querySelector('.bottom');
const l = document.querySelector('.left');
const content = document.querySelector('.content');
const no2 = document.querySelector('.no2');

selectList.forEach(select => select.addEventListener('change', () => {
  no2.style.margin = `${t.value} ${r.value} ${b.value} ${l.value}`;
}))
View Compiled

External CSS

  1. https://tim-montmorency.com/timdoc/shared/styles/codepen.css

External JavaScript

This Pen doesn't use any external JavaScript resources.