Form Alignment Collapses Into Single Row

I have the parent element set to newTableForm with labelColumn and mainFormColumn as children - but with the current CSS everything collapses into one row: Is there a way to undo

Solution 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: 30px30px30px40px;
  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;
}

<formmethod='post'action="/admin-post.php"class="newTableForm"><h4class="mainFormColumn">
    Add a new price compare table
  </h4><labelfor="store"class="labelColumn">Store</label><inputtype="text"name="store"placeholder=""class="mainFormColumn"/><labelfor="product-page"class="labelColumn">Product Page Link</label><inputtype="text"name="product-page"placeholder="Copy address here"class="mainFormColumn" /><buttonclass="mainFormColumn">Save new price compare table</button></form>

Solution 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;
}