How can I set an CSS grid element's max width based on calculated grid column width?

Question

I have a grid with some existing elements, and I want to add an element to the bottom which is able to span the whole width of the grid so far, but whose content must wrap beyond that, instead of expanding the grid. I don't want to specify an explicit max width for the grid itself or the content, though; it should be based on the calculated width of the other content (which in turn sets the calculated width of the grid columns). Is this possible and if so, how? Below is an example:

.theGrid {
display: inline-grid;
grid-template-columns: auto auto;
align-items: center;
}

.normalCell {
background-color: green;
padding: 5px;
}

.stretchCell {
background-color: yellow;
grid-column: 1 / span 2;
}

<div class="theGrid">
<div class="normalCell">Test label</div>
<div class="normalCell">Test content</div>
<div class="normalCell">Test label 2</div>
<div class="normalCell">Test very very very very very long long long long long content 2</div>
<div class="stretchCell">This must wrap when the text gets longer than the green cells above</div>
</div>