<div class="shell">
    <div class="grid">        
        <div class="example">
            <div class="example__heading">
                Before
            </div>
            <div class="example__settings">
                <div class="example__settingsField">
                    <div class="example__settingsValue"></div>
                    <div class="example__settingsControl">
                        <input class="js-inputRange js-fontSize" data-css-prop="--fontSize" data-css-unit="rem" id="js-fontSize01" min="0.75" max="4" step="0.25" type="range" value="1.0">
                    </div>
                    <div class="example__settingsLabel">
                        <label for="js-fontSize01">font-size</label>
                    </div>
                </div>
                <div class="example__settingsField">
                    <div class="example__settingsValue"></div>
                    <div class="example__settingsControl">
                        <input class="js-inputRange js-lineHeight" data-css-prop="--lineHeight" id="js-lineHeight01" min="1" max="3" step="0.1" type="range" value="1.6">
                    </div>
                    <div class="example__settingsLabel">
                        <label for="js-lineHeight01">line-height</label>
                    </div>
                </div>
            </div>
            <ul class="list list--before" style="">
                <li class="list__item">
                    Maecenas faucibus mollis interdum porta gravida at eget metus cras justo odio
                </li>
                <li class="list__item">
                    Natoque penatibus et magnis dis parturient montes, egestas eget quam etiam porta sem malesuada magna
                </li>
                <li class="list__item">
                    Integer posuere erat a ante venenatis dapibus
                </li>
            </ul>
        </div>
    
        <div class="example">
            <div class="example__heading">
                After
            </div>
            <div class="example__settings">
                <div class="example__settingsField">
                    <div class="example__settingsValue"></div>
                    <div class="example__settingsControl">
                        <input class="js-inputRange js-fontSize" data-css-prop="--fontSize" data-css-unit="rem" id="js-fontSize02" min="0.75" max="4" step="0.25" type="range" value="1.0">
                    </div>
                    <div class="example__settingsLabel">
                        <label for="js-fontSize02">font-size</label>
                    </div>
                </div>
                <div class="example__settingsField">
                    <div class="example__settingsValue"></div>
                    <div class="example__settingsControl">
                        <input class="js-inputRange js-lineHeight" data-css-prop="--lineHeight" id="js-lineHeight02" min="1" max="3" step="0.1" type="range" value="1.6">
                    </div>
                    <div class="example__settingsLabel">
                        <label for="js-lineHeight02">line-height</label>
                    </div>
                </div>
            </div>
            <ul class="list list--after" style="">
                <li class="list__item">
                    Maecenas faucibus mollis interdum porta gravida at eget metus cras justo odio
                </li>
                <li class="list__item">
                    Natoque penatibus et magnis dis parturient montes, egestas eget quam etiam porta sem malesuada magna
                </li>
                <li class="list__item">
                    Integer posuere erat a ante venenatis dapibus
                </li>
            </ul>
        </div>
    </div>
</div>

.list {
    $b: &;
    
    --fontSize: 1rem;
    --lineHeight: 1.6;
    --iconSize: calc(var(--fontSize) * 2);
    --baselineDistance: calc(var(--fontSize) * var(--lineHeight) );           
    --iconOffset: calc((var(--baselineDistance) - var(--iconSize)) * 0.5);
    
    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    list-style: none;
    padding-left: 0;
    
    &__item {
        margin-bottom: 2rem;
        position: relative;
        
        &::before {
            color: #32a872;
            content: "\f140";
            display: inline-block;
            font: var(--fa-font-solid);
            font-size: var(--iconSize);
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }
    }
    
    &--before {
        #{$b}__item {
            padding-left: 60px;
            text-indent: -30px;
        }
        
        #{$b}__item::before {
            margin-right: 22px;
        }
    }
    
    &--after {
        #{$b}__item {
            padding-left: calc(var(--iconSize) + 0.5em);
        }           
        
        #{$b}__item::before {
            left: 0;
            position: absolute;
            top: var(--iconOffset);
        }    
    }
}






*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    color: #141414;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    line-height: 1.5;
    margin: 0;
}

.shell {
    margin-left: auto;
    margin-right: auto;

}

@media (min-width: 576px) { 
    .shell {
        max-width: 85vw;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.grid {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.example {
    background-color: #f5f9f9;
    padding: 1rem;
    
    &__heading {
        font-size: 2rem;
        font-weight: bold;
    }
    
    &__settings {
        background-color: #d8e3e7;
        border: 1px solid #c0d2d8;
        border-radius: 0.25rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }

    &__settingsField {
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        margin-bottom: 0.125rem;
    }

    &__settingsLabel {
        flex-shrink: 0;
        margin-right: 0.5rem;
        text-align: right;
        width: 80px;
    }

    &__settingsControl {
        display: flex;
        margin-right: 0.5rem;
    }

    &__settingsValue {
        background-color: hotpink;
        border-radius: 0.25rem;
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.875rem;
        padding: 0 0.25rem;
    }
}

const examples = document.querySelectorAll('.example');

Array.from(examples).forEach((example) => {
    const ranges = example.querySelectorAll('.js-inputRange');
    const element = example.querySelector('.list');
    
    Array.from(ranges).forEach((range) => {
        range.addEventListener('input', () => {
            element.style.setProperty(range.dataset.cssProp, `${range.value}${range.dataset.cssUnit ?? ''}`);
            
            const output = range.parentElement.previousElementSibling;
            output.textContent = `${range.value}${range.dataset.cssUnit ?? ''}`;
        })
    })
})