JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div class="flex">
  <div>
    <label><input type='radio' class='btn' name='left' data-cls='{
    "width": "200px",
    "height": "150px"
    }'>1</label>
    <label><input type='radio' class='btn' name='left' data-cls='{
    "width": "250px",
    "height": "150px"
    }'>2</label>

  </div>
  <div class="flex">
<div id="bSm"></div>
  </div>

  <div>
    <label><input type='radio' class='btn' name='right' data-cls='{
    "background-color": "#999",
    "color": "#333"
    }'>3</label>

    <label><input type='radio' class='btn' name='right' data-cls='{
    "background-color": "#333",
    "color": "#fff"
    }'>4</label>
  </div>
</div>

<div class="cont">
  <input class="form_code" type='text' value='' />
</div>

CSS

body {
  margin: 0 auto;
  padding: 50px;
}

#bSm {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cont {
  margin-top: 20px;
  width: 100%;
  background: #fafafa;
  display: flex;
  align-items: center;
  height: 40px;
}

JavaScript

$(function() {
  var b = $('.btn'),
    cls = {},
    str = '';
  b.click(function() {
    cls = $(this).data("cls");
    $('#bSm').css(cls);
  });
});