Angular CSS Grid Object across multiple Columns - css

Question

I'm trying to do what I thought was a simple task but can't seem to figure it out so maybe it's not possible.
I have an object that I'm iterating through and that object has two attributes
export class OptionLine {
lineCode: number;
lineDescription: String;
}
I would like the LineCode to be Column 1 and LineDescription to be Column 2
My most recent attempt looks like:
<div class="config-options-box">
<div *ngFor="let optionLine of optionLines">
<div class="config-options-line-name">{{optionLine.lineCode}}</div>
<div class="config-options-line-choices">{{optionLine.lineDescription}}</div>
</div>
</div>
CSS:
.config-options-box {
display: grid;
grid-template-columns: 300px 600px;
grid-gap: 10px;
}
.config-options-line-name {
grid-column-start: 1;
grid-row-end: span 1
}
.config-options-line-choices {
grid-column-start: 2;
grid-row-end: span 1
}
But this ends up with item 1 having 2 lines in the first cell, item 2 having 2 lines in the second cell (row 1 column 2), etc.
Is this even possible?

Answer 1

Figured out I could display a sub grid inside each column of the main grid. So the main grid is 1 row x 2 columns and then each column has a grid inside that is n rows x 1 column. Probably not the most efficient solution but I should have less than 20 items so I imagine it will be fine.
<div class="config-options-box">
<div class="config-options-names">
<div *ngFor="let optionLine of optionLines">
<div class="config-options-line-name">{{optionLine.lineCode}}</div>
</div>
</div>
<div class="config-options-descriptions">
<div *ngFor="let optionLine of optionLines">
<div class="config-options-line-name">{{optionLine.lineDescription}}</div>
</div>
</div>
</div>
.config-options-box {
display: grid;
grid-template-columns: 300px 600px;
grid-gap: 10px;
}
.config-options-subgrid {
display: grid;
grid-template-columns: auto;
grid-gap: 10px;
}