JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "box">
    <div class = "table" id = "table">
        <div id = "header">Kalkulatory macierzowe</div>
        <div id = "row">
            <div id = "table1">
            <div class = "header">Wyznacznik [2x2]</div>
        <form id = "row1">
        <input type = "text" class = "det1"/><!--first row-->
        <input type = "text" class = "det1"/>
        </form>
     <form id = "row2">
        <input type = "text" class = "det1"/><!--second row-->
        <input type = "text" class = "det1"/>
    </form>
    <div class = "count" onclick="det(2,'det1')"><a href = "#">Wylicz</a></div>
    <input type = "text" id = "calcValue2"/>
</div>
<div id = "table2">
<div class = "header">Wyznacznik [3x3]</div>
 <form id = "row1"><!--first row-->
    <input type = "text" class = "det"/>
    <input type = "text" class = "det"/>
    <input type = "text" class = "det"/>
 </form>
 <form id = "row2"><!--second row-->
    <input type = "text" class = "det"/>
    <input type = "text" class = "det"/>
    <input type = "text" class = "det"/>
</form>
<form id = "row3"><!--third row-->
    <input type = "text" class = "det"/>
    <input type = "text" class = "det"/>
    <input type = "text" class = "det"/>
</form>
<div class = "count" onclick="det(3,'det')"><a href = "#">Wylicz</a></div>
<input type = "text" id = "calcValue1"/>
</div>

<div id = "table3">
<div class = "header">Macierz odwrotna [2x2]</div>
 <form id = "row1">
    <input type = "text" class = "det2"/><!--first row-->
    <input type = "text" class = "det2"/>
 </form>
 <form id = "row2">
    <input type = "text" class = "det2"/><!--second row-->
    <input type = "text" class = "det2"/>
</form>
<div class = "count" onclick="det(2,'det2')"><a href = "#">Wylicz</a></div>
</div>
    </div>
</div>
</div>

CSS

.table{
position:relative;
top:0;
padding:0;
height:100%;
border-collapse:collapse;
}
#table{
border-collapse:collapse;
border-right:2px inset rgb(0,0,0);
border-left:2px inset rgb(0,0,0);
border-top:2px inset rgb(150,150,150);
border-bottom:none;
width:1067px;
min-width:1067px;
height: 599px;
min-height: 599px;
margin:auto;
}

#table1{
    position:relative;
    display:inline-block;
    width:270px;
    min-width:270px;
    height:155px;
    min-height:155px;
    margin-left:3px;
    border:2px inset rgb(0,0,0);
    border-collapse:collapse;
    background:rgba(0,0,0,0.2);
    float: left;
}
#table2{
    position:relative;
    display:inline-block;
    width:300px;
    min-width:300px;
    height:155px;
    min-height:155px;
    border:2px inset rgb(0,0,0);
    border-collapse:collapse;
    background:rgba(0,0,0,0.2);
    float: left;
}
#table3{
    display:inline-block;
    width:320px;
    min-width:320px;
    height:155px;
    min-height:155px;
    border:2px inset rgb(0,0,0);
    border-collapse:collapse;
    background:rgba(0,0,0,0.2);
    float: left;
}

.det {
    float: left;
    width: 30%;
}
.det1 {
    float: left;
    width: 45%;
}

#header {
    width: 100%;
    height: 20px;
    display: block;
}
}