Align items in same rows dynamically using css Grid

Question

I'm running into an issue trying to make the following example works : Screen using Chrome debugger

I would like to align my title blocks with my adresses, in fact I'd like adresses start at rows number 1.

Here is the simple code I run :

CSS

#lawyerOfficeLinksContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.lawyerContract {
    grid-column: 1/2;
}

.lawyerDomiciliation{
    grid-column: 2/3;
}

HTML(using Razor)

<div id="lawyerOfficeLinksContainer">
        @foreach(var contract in Model.LawyerConsultModel.LawyerContractsList.Rows)
        {
            <text>
                <div class="lawyerContract">
                    <h3>Title</h3>
                    <div>
                        <b><label>Name :</label></b>
                        <span>Test Name</span>
                    </div>
                </div>
            </text>
        }
        @foreach (var dom in Model.LawyerConsultModel.LawyerDomiciliationsList.Rows)
        {
            <text>
                <div class="lawyerDomiciliation">
                    <label>Adress :</label>
                    <p>Test</p>
                </div>
            </text>
        }
    </div>

Answer 1

Here is a demo:

html:

<div id="lawyerOfficeLinksContainer">
    <div class="left">
        @foreach(var contract in Model.LawyerConsultModel.LawyerContractsList.Rows)
        {
            <text>
                <div>
                    <h3>Title</h3>
                    <div>
                        <b><label>Name :</label></b>
                        <span>Test Name</span>
                    </div>
                </div>
            </text>
        }
    </div>
    <div class="right">
        @foreach (var dom in Model.LawyerConsultModel.LawyerDomiciliationsList.Rows)
        {
            <text>
                <div>
                    <label>Adress :</label>
                    <p>Test</p>
                </div>
            </text>
        }
    </div>
</div>

css:

 #lawyerOfficeLinksContainer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .left {
        grid-column: 1/2;
    }

    .right {
        grid-column: 2/2;
    }

result: