<div class="field-items">
   <div class="field-item even">
      <div id="playground-result" style="font-style: oblique;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat iusto ducimus aliquid, soluta quod nihil dicta libero inventore fuga dignissimos, placeat commodi repudiandae animi maxime quaerat amet est perferendis? Corrupti.</div>
      <div class="grid-x grid-margin-x">
         <div id="playground-value" class="cell medium-12 large-6">
           <span>Вибери потрібне значення:</span>
           <label><input type="radio" name="value" value="normal" checked="">normal</label>
           <label><input type="radio" name="value" value="italic">italic</label>
           <label><input type="radio" name="value" value="oblique">oblique</label>
        </div>
         <div id="playground-code" class="cell medium-12 large-6">
           <span>Результат:</span>
            <pre>div {
  font-style: <span id="playground-code-value">oblique</span>;
}</pre>
         </div>
      </div>
   </div>
</div>

#playground-result{
  padding: 10px;
  font-size: 18px;
  background-color: lightgrey;
  margin-bottom: 10px;
}
#playground-value{
  font-size: 20px;
  border: 2px dashed red;
  width: auto;
  text-align: center;
  padding: 5px;
  margin-bottom: 10px;
}

#playground-code{
  font-size: 18px;
}

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

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