El HTML sería simple ... puede agregar ID o nombres de clase para que sea más fácil aplicar el js a los elementos correctos

 <input name="height" placeholder="height" /> <input name="width" placeholder="width" /> <input name="background-color" placeholder="color" /> <input name="border-radius" placeholder="border radius" /> <div> <span class="soandso" /> </div>

El JS es un poco pequeño si no necesita obtener cada objeto dom.

 const span = document.getElementsByClassName('soandso')[0]; const input = document.querySelectorAll('input'); const updateStyle = e => { span.style[e.currentTarget.name] = e.currentTarget.value; }; input.forEach(item => { item.addEventListener('change', updateStyle) })

Y luego el css necesitaría tener la "pantalla: bloque en línea" si está usando un lapso

 .soandso { margin: 20px; display: inline-block; height: 20px; width: 20px; background-color: red; }

Puedes ver el código ejecutándose aquí..

https://jsfiddle.net/CynderRnAsh/necrd0pu/61/