JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
test
</div>
<div class="panel-body">
<table cellspacing="0" id="maket">
<tr>
<td id="leftcol">
<img src="http://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" width="200" height="200" class="pull-left" alt="...">
</td>
<td id="center">
<table class="table" style="table-layout:fixed">
<tbody>
<tr>
<td>name</td>
<td>
<div id='test1'>none</div>
</td>
</tr>
<tr>
<td>map<td>
<td>
<div id='test2'>none</div>
</td>
</tr>
<tr>
<td>max player<td>
<td>
<div id='test3'>none</div>
...
CSS
#maket {
width:100%;
}
TD {
vertical-align:top;
padding:5px;
}
TD#leftcol {
width:20%;
}
TD#center{
width:40%;
}
TD#rightcol {
width:40%;
}
JavaScript
let text = {name: "testserver", map: "de_dust2", password: false, maxplayers: 10};
let text1 = {name: "testserver1", map: "de_dust2", password: false, maxplayers: 10};
let text2 = {name: "testserver2", map: "de_dust2", password: false, maxplayers: 10};
document.getElementById('test1').innerHTML = text.name;
document.getElementById('test2').innerHTML = text.map;
document.getElementById('test3').innerHTML = text.maxplayers;