JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<style>
body { font-size: 12px; }
#canvas { border: 1px solid #000; }
table { border-collapse: collapse; border-spacing: 0; }
td { width: 10%; padding: 0; margin: 0; }
.padding td { padding: 4px; }
#avgT td { color: #fff; }
#avgV td { color: #fff; }
#number td { color: #fff; }
.nowrap { white-space: nowrap; }
td.padding4 { padding: 4px; }
button { width: 8em; font-size: 12px; }
input { width: 8em; font-size: 12px; box-sizing: border-box; }
</style>
<table style="width: min-content">
<tbody>
<tr>
<td class="padding4" style="vertical-align: top; text-align: left">
<label class="nowrap">
Количество атомов:<br>
<input id="numberOfAtoms" type="text" value="1800" autocomplete="off"/>
</label>
<br>
<br>
<label class="nowrap">
Начальная температура<br>(°C):<br>
<input id="startTemperature" type="text" value="0" autocomplete="off"/>
</label>
<br>
<br>
<label class="nowrap" title="Наносекунд в секунду. Должно быть в пределах [0.001..0.1], меньше - медленнее">
Масштаб времени<br>(нс/c):<br>
<input id="nanoSecondsPerSimulationSecond" type="text" value="0.1" autocomplete="off"/>
</label>
<br>
<br>
<label class="nowrap">
Температура левой стенки<br>(°C):<br>
<input id="heatTemperatureInCelsium" type="text" value="600" autocomplete="off"/>
</label>
<br>
<br>
<button id="start">Старт</button>
<br>
<button id="stop">Стоп</button>
<br>
<br>
<button id="makeSound">Звук</button>
<br>
<br>
<br>
Размер: 200x100нм
<br>
Время: <span id="timeInNs">0</span> нс
<br>
</td>
<td>
...