How do I make a Grid panel be no taller than needed to contain its contents?

I'm trying to create a two-column layout using CSS Grid.

I have

.left_1 {
    grid-column: 1;
    grid-row: 1;
}
.left_2 {
    grid-column: 1;
    grid-row: 2;
}
...

.right_1 {
    grid-column: 2;
    grid-row: 1;
}
.right_2 {
    grid-column: 2;
    grid-row: 2;
}

...

and so on. The top two grid elements contain only header tags for headers that label each column:

<div class="left_1"><h4>Left Header</h4></div>
....
<div class="right_1"><h4>Right Header</h4></div>

These grid panels end up being much taller than they need to be, so that the headers (vertically aligned in the middle) float way above the rest of the columns so that it's not immediately clear that they're supposed to be labels for those columns. I've colored the background of the <h4> element to confirm that these are the normal size: just tall enough to contain the text of the headers. It's the Grid layout itself that's making the panels too big.

I've tried adding grid-template-rows: fit-content(); (various percentages), grid-template-rows: auto;, height: auto;, height: 100%;, height: fit-content;, and display: inline-block; to the class descriptors for left_1 and right_1, but nothing changes the height of the Grid panels.

How do I make the Grid panels be no taller than necessary to contain their contents? I'd like to avoid hard-coding an exact number of pixels.

Edit: Here's a full file that shows the problem:

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">

        <style>
            .columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 10px;
            }

            .left_1 {
            grid-column: 1;
            grid-row: 1;
            }
            .left_2 {
            grid-column: 1;
            grid-row: 2;
            }

            .right_1 {
            grid-column: 2;
            grid-row: 1;
            }
            .right_2 {
            grid-column: 2;
            grid-row: 2;
            }

            h4 {
            background-color: yellow;
            }
        </style>

    </head>

    <body>
        <form>
            <div class="columns">
                <div class="left_1"><h4>Left Header</h4></div>
                <select class="left_2" multiple="yes">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                </select>

                <div class="right_1"><h4>Right Header</h4></div>
                <select class="right_2" multiple="yes">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                </select>
            </div>
        </form>
    </body>
</html>

Solution

It is a hack, but since all you need is to display clearly that the headers are labels for the columns.
just add:
margin-bottom: 0;
to your h4 block in the CSS file.

So instead of the one exists, change it to the one below:

h4 {
  background-color: yellow;
  margin-bottom: 0;
}