JSFiddle - React, Tailwind, and code Playground

by Aleksandr Zidyganov

HTML

<div class="wrapp">
    <table class="main-table">
        <tr>
            <td>
                <table class="table1">
                    <tr>
                        <td class="row1">СТрока №1</td>
                    </tr>
                    <tr>
                        <td class="row2">СТрока №2</td>
                    </tr>
                    <tr>
                        <td class="row3">СТрока №3</td>
                    </tr>
                    <tr>
                        <td class="row4">СТрока №4</td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="table2">
                    <tr>
                        <td class="row1">СТрока №1</td>
                    </tr>
                    <tr>
                        <td class="row2">СТрока №2</td>
                    </tr>
                    <tr>
                        <td class="row3">СТрока №3</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

CSS

body {
        background-color: #ccc;
        }
    .wrapp {
    height: 400px;
    }
    
    .main-table {
        height: 100%;
        }
        .main-table td {
        vertical-align: top;
        }
        td.row1 {
            background-color: #af7eb6;
  height: 1%;
            }
        .row2 {
            background-color: #87a81d;
    vertical-align: middle !important;
            }
            .row3 {
            background-color: #6fa7d5;
    height: 1%;
            }
            .row4 {
            background-color: #d6d2cc;
height: 1%;
    
}

.table1, .table2 {
height: 100%;
}