<div id="flex-box-model">
    <div id="box-model-options">
        <div class="input-element">
            <h3>Margin</h3>
            <input type="range" min="0" max="40" value="0" step="0.1" id="margin" />
        </div>
        <div class="input-element">
            <h3>Padding</h3>
            <input type="range" min="0" max="40" value="16" step="0.1" id="padding" />
        </div>
        <div class="input-element">
            <h3>Border</h3>
            <input type="range" min="0" max="10" value="0" step="1" id="border" />
        </div>
        <div class="input-element">
            <h3>Width</h3>
            <input type="range" min="0" max="300" value="124" step="0.1" id="width" />
        </div>
        <div class="input-element">
            <h3>Height</h3>
            <input type="range" min="0" max="300" value="124" step="0.1" id="height" />
        </div>
    </div>
    <div id="box-model-element">
        Hello, I am a box
    </div>
</div>
<style>
    #flex-box-model {
        display: flex;
    }
    #box-model-options {
        margin: 0 3rem 2rem 0;
    }
    #box-model-options h3 {
        font-size: 1rem;
        margin: 0;
        font-weight: 500;
    }
    .input-element {
        border: 2px solid #2f38493b;
        border-radius: 10px;
        margin: 0 0 1rem 0;
        padding: 0.5rem 1.5rem;
    }
    @media screen and (max-width: 900px) {
        #flex-box-model {
            display: block;
        }
        #box-model-options {
            margin: 0 0 2rem 0;
        }
    }
    #box-model-element {
        margin: 0;
        padding: 16px;
        height: 124px;
        text-align: center;
        font-weight: 600;
        width: 124px;
        background: #2f384a;
        border-radius: 14px;
        border: none;
    }
</style>
<script>
    document.querySelectorAll('.input-element input').forEach(function(item) {
        item.addEventListener('input', function(e) {
            if(item.id === 'border') {
                document.getElementById('box-model-element').style.border = `${item.value}px solid rgb(2 117 255)`;
            }
            else {
                document.getElementById('box-model-element').style[`${item.id}`] = `${item.value}px`;
            }
        })
    })
</script>

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: rgb(15 19 22);
  color: white;
}