Untitled

<html>
    <head>
        <style>
        .grid {display: grid;}
        .menu {grid-template-columns: repeat(4, 1fr);}
        .menu .item span:hover {border-bottom: 2px solid #f26c4f;}
        .item a:hover { border-bottom: 2px solid #f26c4f;}
        .data {margin-top: 10px;}
        .body {grid-template-columns: 1fr 2fr;}
        .grid-item {margin-top:20px;}
        tr td {border: 1px solid #000;}
    </style>
</head>
<body>
    <section id="body">
        <div class="container grid">
            <div class="menu grid">
                <div class="item"><a href="#">first</a></div>
                <div class="item"><span>second</span></div>
                <div class="item"><span>third</span></div>
                <div class="item"><span>forth</span></div>
            </div>
            <div class="body grid">
                <div class="grid-item">
                    test item grid
                </div>
                <table class="data grid-item">
                    <tr>
                        <td>row</td> <td>item</td>
                    </tr>
                    <tr>
                        <td>row</td> <td>item</td>
                    </tr>
                </table>
            </div>
        </div>
    </section>
</body>
<html>

в стилях таблицы убрать margin-top
убрать у пунктов меню :hover
у .container убрать класс .grid
у .body убрать класс grid