Just set display:grid
on the parent…
.table-products {
display: grid;
grid-template-areas: "header1 header2" "body1 body2";
}
.table-products__header1 {
grid-area: header1;
background: yellow;
}
.table-products__body1 {
grid-area: body1;
background: green;
}
.table-products__header2 {
grid-area: header2;
background: blue;
}
.table-products__body2 {
grid-area: body2;
background: red;
}
.table-products__header1,
.table-products__header2,
.table-products__body1,
.table-products__body2 {
width: 40%;
<div class="table-products">
<div class="table-products__header1">
header1
</div>
<div class="table-products__body1">
body1
</div>
<div class="table-products__header2">
header2
</div>
<div class="table-products__body2">
body2
</div>
</div>