I have a page layout with 3 columns. On desktop, header might take more than one line and when it’s multiple lines, it overflows the second row. How do I make the first row height adjust to content height? How do I start second row only after the first row ends? Here’s my Codepend. Here’s my code:

<div class="grid">
    <h1 class="area-header">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Maecenas in aliquet quam. Sed ac lectus scelerisque, maximus
        nulla eu, fringilla.
    </h1>
    <img src="https://i.ibb.co/6yzWVry/rectangle.png" class="area-image" />
    <div class="area-box">
        <p>content</p>
    </div>
    <table class="area-table">
        <tr>
            <td>table</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</div>

.grid {
    display: grid;
    grid:
        "header"
        "image"
        "box"
        "table";
    grid-template-rows: 4 (auto);
    gap: 1rem;
    border: 1px solid #000;
}

.area-header {
    grid-area: header;
    border: 1px solid #000;
    background-color: red;
    margin: 0;
}

.area-image {
    grid-area: image;
    border: 1px solid #000;
}

.area-box {
    grid-area: box;
    border: 1px solid #000;
    background-color: pink;
}

.area-table {
    grid-area: table;
    border: 1px solid #000;
    background-color: purple;
    color: white;
}

@media screen and (min-width: 768px) {
    .grid {
        display: grid;
        grid-template-areas:
            "image header box"
            ". table .";
        grid-template-rows: 40px 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 0;
        margin-top: 80px;
    }
}

Here’s the screenshot of what I talked about. I want table to start only after the title.