Css – Elements in flexbox are shaking when resizing window

I am using CSS flexbox to create a row that has 2 elements:

1. div that has 50% width with heading and paragraph
2. div that has width of 28rem and contains flexbox grid.

the row is set to flex-wrap: wrap.
The problem is that when resizing the window, the elements in the grid with the width of 28rem start shaking which doesn’t look nice.
The <h2> element (green) uses font-size: calc(1.375rem + 3.525vw), however even using fixed values didn’t fix the problem.

If I run the code from JSFiddle shakes way less than If I create empty html file paste the code and run it locally in Chrome. To see it, go almost full-screen and resize the window to shrink it. It shakes a lot.

I am including the code here (also available on jsfiddle)
https://jsfiddle.net/qpcv5tbu/4/
https://jsfiddle.net/qpcv5tbu/3/show

video: streamable.com/3ax7vc
file: file.io/xITB0gUaEqMN

<div id="wrapper">

    <div class="fifty">
        <h1>My heading
        </h1>


        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sagittis nulla. Nulla efficitur, sapien sit
            amet molestie aliquet, velit dolor lacinia enim, at aliquam nibh nunc at orci. Phasellus consectetur ligula
            vehicula congue mattis. Integer congue egestas augue vitae scelerisque. Fusce nec dolor non purus aliquam
            bibendum sit amet vitae augue. Pellentesque id enim sem. Pellentesque semper dolor eu ante lacinia blandit.
            Curabitur venenatis libero et quam mollis rutrum.

            Morbi a lectus purus. In bibendum nulla sem, eget pellentesque diam elementum eget. Quisque in tempor quam.
            Aliquam lacinia aliquet augue, ut pulvinar eros auctor in. Morbi eu facilisis nisl, sit amet mattis elit.
            Sed lacus erat, volutpat ac sem sed, interdum luctus risus. Morbi elementum ante urna, eget egestas nisi
            accumsan vitae. Nullam eget sagittis ipsum. Donec vitae finibus ante. Nam eleifend eros odio, et suscipit
            ante cursus eget. Phasellus bibendum est quis purus placerat, sit amet ullamcorper orci ullamcorper.
            Curabitur dictum malesuada enim vitae vestibulum. Sed ut mattis libero, vitae commodo sem. Integer sit amet
            pharetra ipsum.</p>
    </div>


    <div class="grid">

        <div class="item"> <!---ELEMENT THAT IS SHAKING-->
            <h3>10</h3>
            <p> Morbi a lectus purus. In bibendum nulla sem, eget pellentesq</p>
        </div>


        <div class="item">
            <h3>10</h3>
            <p> Morbi a lectus purus. In bibendum nulla sem, eget pellentesq</p>
        </div>

        <div class="item">

            <h3>10</h3>
            <p> Morbi a lectus purus. In bibendum nulla sem, eget pellentesq</p>
        </div>

        <div class="item">
            <h3>10</h3>
            <p> Morbi a lectus purus. In bibendum nulla sem, eget pellentesq</p>
        </div>
    </div>

</div>

#wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0px;
        flex-wrap: wrap;
    }

    .fifty {
        width: 50%;
    }

    .item {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0px 0px 0px 20px;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid white;
        width: 45%;
        flex-direction: column;
    }

    .grid {
        display: flex;
        flex-wrap: wrap;
        padding: 0px;
        margin: 0px;
        width: 28rem;
    }

    h3 {
        color: rgb(45, 235, 184);
        font-size: calc(1.375rem + 3.525vw);
        font-family: Halvetica;
    }