Form alignment collapses into single row - html

Question

I have the parent element set to newTableForm with labelColumn and mainFormColumn as children - but with the current CSS everything collapses into one row:
.newTableForm {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 30px 30px 30px 40px;
grid-gap: 10px;
grid-template-areas: "... main" "labels main" "labels main" "... main";
border: 2px dashed deeppink;
}
.labelColumn {
grid-area: labels;
}
.mainFormColumn {
grid-area: main;
}
<form method='post' action="/admin-post.php" class="newTableForm">
<h4 class="mainFormColumn">
Add a new price compare table
</h4>
<label for="store" class="labelColumn">Store</label>
<input type="text" name="store" placeholder="" class="mainFormColumn"/>
<label for="product-page" class="labelColumn">Product Page Link</label>
<input type="text" name="product-page" placeholder="Copy address here" class="mainFormColumn" />
<button class="mainFormColumn">Save new price compare table</button>
</form>
Is there a way to undo the single column stacking behavior here? I would remove the template areas altogether if not for the blank sections with ... (above and below the label section)

Answer 1

Again you can drop grid-template-areas as multiple grid-areas overlap - and you can use pseudo elements for this:
place labelColumn into the first column using grid-column: 1 and mainFormColumn into the second column using grid-column: 2.
after element will be the first column in the last row using grid-row: -2 and grid-column: 1
before will be first column in the first row using grid-column: 1
See demo below:
.newTableForm {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 30px 30px 30px 40px;
grid-gap: 10px;
border: 2px dashed deeppink;
}
.labelColumn {
grid-column: 1;
}
.mainFormColumn {
grid-column: 2;
}
.newTableForm:after, .newTableForm:before {
content: '';
display: block;
grid-column: 1;
}
.newTableForm:after {
grid-row: -2;
}
<form method='post' action="/admin-post.php" class="newTableForm">
<h4 class="mainFormColumn">
Add a new price compare table
</h4>
<label for="store" class="labelColumn">Store</label>
<input type="text" name="store" placeholder="" class="mainFormColumn"/>
<label for="product-page" class="labelColumn">Product Page Link</label>
<input type="text" name="product-page" placeholder="Copy address here" class="mainFormColumn" />
<button class="mainFormColumn">Save new price compare table</button>
</form>

Answer 2

I just update your .newTableForm css with some updates. I hope it'll help you out. Thanks
.newTableForm {
display: flex;
flex-direction: column;
border: 2px dashed deeppink;
}