title: Align items in same rows dynamically using css Grid
body: <p>I'm running into an issue trying to make the following example works : <a href="https://i.stack.imgur.com/Cg4Tr.png" rel="nofollow noreferrer">Screen using Chrome debugger</a></p>
  <p>I would like to align my title blocks with my adresses, in fact I'd like adresses start at rows number 1.</p>
  <p>Here is the simple code I run :</p>
  <p><strong>CSS</strong></p>
  <pre><code>#lawyerOfficeLinksContainer {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
  }
  
  .lawyerContract {
      grid-column: 1/2;
  }
  
  .lawyerDomiciliation{
      grid-column: 2/3;
  }
  </code></pre>
  <p><strong>HTML(using Razor)</strong></p>
  <pre><code>&lt;div id=&quot;lawyerOfficeLinksContainer&quot;&gt;
          @foreach(var contract in Model.LawyerConsultModel.LawyerContractsList.Rows)
          {
              &lt;text&gt;
                  &lt;div class=&quot;lawyerContract&quot;&gt;
                      &lt;h3&gt;Title&lt;/h3&gt;
                      &lt;div&gt;
                          &lt;b&gt;&lt;label&gt;Name :&lt;/label&gt;&lt;/b&gt;
                          &lt;span&gt;Test Name&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/text&gt;
          }
          @foreach (var dom in Model.LawyerConsultModel.LawyerDomiciliationsList.Rows)
          {
              &lt;text&gt;
                  &lt;div class=&quot;lawyerDomiciliation&quot;&gt;
                      &lt;label&gt;Adress :&lt;/label&gt;
                      &lt;p&gt;Test&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/text&gt;
          }
      &lt;/div&gt;
  </code></pre>