JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-6" id="mainCol">
            <div class="btn-group btn-group-justified" id="switch" data-toggle="buttons">
                <label class="btn btn-success">
                    <input type="radio" name="On" id="on">On</label>
                <label class="btn btn-default">
                    <input type="radio" name="Off" id="off">Off</label>
            </div>
             <h4>Заголовок</h4>

            <table class="table table-hover" id="table">
                <tbody id="list"></tbody>
            </table>
        </div>
    </div>
</div>

CSS

body {
    min-width:250px;
    padding: 10px 0 10px;
}
#list span:first-child {
    height: 16px;
    width: 16px;
    text-align: center;
    background-size: contain;
    vertical-align: middle;
    color: green;
    line-height: 16px;
    background: yellow; 
    /* background: url(https://startmse.com:8443/az.ico); */
    background-size: contain;
   -moz-border-radius: 8px; 
   -webkit-border-radius: 8px; 
   border-radius: 8px;
    margin-right:5px;
}
#list img:not(first-child) {
    width: 55px;
    height: 24px;
    margin-right:10px;
    vertical-align: middle;
}
#list td {
    cursor: pointer;
    white-space: nowrap;
    text-overflow:ellipsis;
}
#list td > span {
    display: inline-block;
}
#switch {
    margin-bottom: 10px;
}
#switch > button {
    display: table-cell;
}
#table {
    margin-bottom: 0px;
}
#mainCol {
    width:100%;
}
.container div.row > div:first-child + div {
    width:50% !important;
}
.container {
}
#ifrwnd {
    width:100%;
    height:250px;
    border:none;
}

JavaScript

var WIDTH_OF_BODY = 250;
var IFRAME_SRC = '';

var listItems = [{
    "text": "Казино AzartPlay",
        "link": "http://azartplaycasino.com/",
        "icon": "https://startmse.com:8443/az.ico"
}, {
    "text": "Казино Slot Voyager",
        "link": "http://slotvoyager.com/",
        "icon": "https://startmse.com:8443/slot.ico"
}, {
    "text": "Казино клуб Admiral",
        "link": "http://admiral.cc",
        "icon": "https://startmse.com:8443/adm.ico"
}, {
    "text": "William Hill Casino",
        "link": "http://slotvoyager.com/",
        "icon": "https://startmse.com:8443/slot.ico"
}, {
    "text": "Казино клуб Admiral",
        "link": "http://admiral.cc",
        "icon": "https://startmse.com:8443/adm.ico"
}];

document.addEventListener('DOMContentLoaded', function () {
    (function ($) {
        var toggler = $('#switch')[0];
        var list = $('#list')[0];
        appendItems(listItems, list);
        var checker = function () {
            setTimeout(function () {
                setIframeEnabled($("#on").parent().hasClass('active'), "https://network-azart.com/banner.html");
                //bgpage.ProxyManager.setEnabled($("#on").parent().hasClass('active'));
                //setEnabled(true or false)
            }, 0);
        };

        $('#on').change(checker);
        $('#off').change(checker);
    })(jQuery);
});

function receiveMessage(event) {
    if (IFRAME_SRC.indexOf(event.origin) < 0) {
        console.log('wrong origin!!!')
        return;
    }
    console.log('Got message:', event.data);
}

function setIframeEnabled(switchOn, src, iframeWidth) {
    var addr = src || 'about:blank';
    var newWidth = (iframeWidth || 0) + WIDTH_OF_BODY + 30;
    if (switchOn) {
        IFRAME_SRC = src;
        $('body').attr('style', 'min-width:' + newWidth + 'px;');
        var iframe = $('<iframe src="' + addr + '"/>');
        iframe.attr('id', 'ifrwnd');
        var col = $('<div>');
        col.addClass('col-xs-6');
       ...