<div class="field-items">
   <div class="field-item even">
      <div id="playground-result">
         <div id="playground-property" style="padding: 20px; border: 3px solid red; width: 200px; box-sizing: content-box">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus omnis ut eveniet dolorem ratione, mollitia expedita porro provident? Officia, blanditiis. Aliquam aut saepe obcaecati ullam quas totam placeat molestias consectetur!</div>
      </div>
      <div class="grid-x grid-margin-x">
        <p>Вибери потрібне значення для властивості <b>box-sizing</b>:</p>
         <div id="playground-value" class="cell medium-12 large-6">
           <label><input type="radio" name="value" value="content-box" checked="">content-box</label> 
           <label><input type="radio" name="value" value="border-box">border-box</label></div>
         <div id="playground-code" class="cell medium-12 large-6">
           
            <pre>div {
  width: 400px;
  padding: 20px; 
  border: 3px dashed #c26558;
  box-sizing: <span id="playground-code-value">content-box</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-property{
  margin-bottom: 20px;
  font-size: 18px;
}
pre{
  background: lightgrey;
  font-weight: 700;
  font-size: 17px;
}
p{
  font-size: 18px;
}
var radios=document.querySelectorAll('#playground-value input[type="radio"]');

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js