JSFiddle - React, Tailwind, and code Playground

CSS

div{
  height:200px;
}
fieldset {
    border: 2px groove threedface;
  width:22%;
  float:left;
  height:100%;
}

input[type="text"] {
  width:80px;
}

JavaScript

var tpl={
  data : [],
  _cells: [],
  chkXInput:function(name,value){
    this.data.push('<input type="checkbox" name="'+name+'.check"><input type="text" value="'+(value|"")+'"><span class="cross">X<span><br>');
    return this;
  },
  chkInput:function(name,value){
    this.data.push('<input type="checkbox" name="'+name+'.check"><input type="text" value="'+(value|'')+'"><br>');
    return this;
  },
  inpButton:function(name,value){
    this.data.push('<input type="text" value="'+(value|'')+'"><input type="button" value="'+name+'"><br>');
    return this;
  },
  cells:function(name){
    this._cells.push('<fieldset><legend>'+name+'</legend>'+this.data.join('')+'</fieldset>');
    this.data=[];
    return this;
  },
  form:function(name){
    document.write('<form><div>'+this._cells.join('')+'</div><input type="button" value="'+name+'">');
    this._cells=[];
    return this;
  },
}

tpl
    .chkXInput('height1',170)
    .chkXInput('height2',175)
    .inpButton('height3','Добавить')
 .cells('Категории ширины')
   .chkXInput('height1',170)
    .chkXInput('height2',175)
    .chkXInput('height2',175)
    .chkXInput('height2',175)
    .inpButton('height3','Добавить')
.cells('Категории высоты')
    .chkXInput('height1',170)
    .chkXInput('height2',175)
    .inpButton('height3','Добавить')
 .cells('Категории диаметра')
   .chkInput('height1',170)
    .chkInput('height2',175)
.cells('Категории ширины')
.form('Сохранить изменения');