<div class="sandbox">
  <div class="options">
    <pre>
.element {
  padding:&nbsp;<select>
        <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">
      Lorem ipsum dolor sit amet, massa vitae velit elit. Nam ut ultricies elit.
    </div>
  </div>

</div>
.element {
  background-color: var(--green);
  font-weight: 300;
  text-align: left;
  padding: 0;
}
View Compiled 
const select = document.querySelector('select');
const content = document.querySelector('.content');
const element = document.querySelector('.element');

select.addEventListener('change', e => {
  element.style.padding = select.value;
  content.style.padding = select.value;
  element.style.margin = `${parseInt(select.value) * -1}px`;
});
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.