JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outercontainer">
        <div class="radio-single">
            <label>red</label>
            <input class="red" type="radio" name="colorRadio" value="red">
            <div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
        </div>
        <div class="radio-single">
            <label>green</label>
            <input class="green" type="radio" name="colorRadio" value="green">
            <div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
       </div>       
       <div class="radio-single">
            <label>blue</label>
            <input class="blue" type="radio" name="colorRadio" value="blue">
            <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>
       </div>
       <div class="radio-single">
            <label > copy</label>
            <input class="red"  type="radio" name="colorRadio" value="red">
            <div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
       </div>
   </div>

CSS

#outercontainer div {
  margin-bottom: 1em;
}
.box{
    padding: 1.5em;
    display: none;
    margin-top: 1em;
    border: 0.1em solid #000;
}
.red{ background: #F00; }
.green{ background: #0F0; }
.blue{ background: #0FF; }

JavaScript

jQuery(function($) {
    $('input[type="radio"]').click(function(){
    	$('.box').hide();
       $(this).parent('.radio-single').find('.box').show();
    });
});