<div class="field-items">
  <div class="field-item even">
    <div id="playground-result">
      <ul id="playground-property" style="list-style-position: inside;">
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut ipsam animi reiciendis harum, obcaecati earum aliquam laudantium dolore fugiat enim! Sint ipsam illo eius rerum! Nulla, porro aperiam blanditiis obcaecati cupiditate unde officia saepe nisi hic dolore quia eos, commodi, illo placeat facere. Repellendus doloribus molestias impedit dolore nesciunt nam?</li> 
      </ul>
    </div>
    <div class="grid-x grid-margin-x">
      <p>Вибери потрібне значення для властивості <b>list-style-position</b>:</p>
      <div id="playground-value" class="cell medium-12 large-6">
        <label><input type="radio" name="value" value="inside" checked="">inside</label>
        <label><input type="radio" name="value" value="outside">outside</label>
      </div>
      <div id="playground-code" class="cell medium-12 large-6">
        <pre>ul {
  list-style-position: <span id="playground-code-value">inside</span>;
}<div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></pre>
        
      </div>
      
    </div>
    
  </div>
  
</div>

#playground-code{
  background: lightgrey;
  font-weight: 700;
  font-size: 18px;
}

#playground-value{
  margin: 15px;
  font-size: 18px;
}
p{
  text-decoration: underline;
}
li{
  font-size: 17px;
}

var radios=document.querySelectorAll('#playground-value input[type="radio"]');

function changeHandler(event){
  document.getElementById('playground-property').style.listStylePosition=this.value;document.getElementById('playground-code-value').innerText=this.value;
}
Array.prototype.forEach.call(radios,function(radio){
  radio.addEventListener('change',changeHandler);
});