<div class="sandbox">
<div class="options">
<pre>
.element {
<select>
<option value="25px 0 0">padding-top</option>
<option value="0 25px 0 0">padding-right</option>
<option value="0 0 25px">padding-bottom</option>
<option value="0 0 0 25px">padding-left</option>
</select>: 25px;
}
</pre>
</div>
<div class="content">
<div class="element">
Lorem ipsum dolor sit amet, massa vitae velit elit.
</div>
</div>
</div>
.element {
background-color: var(--green);
font-weight: 300;
text-align: left;
padding: 25px 0 0;
}const select = document.querySelector('select');
const element = document.querySelector('.element');
select.addEventListener('change', e => element.style.padding = select.value);
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.