clr-dg-row-detail not showing properly aligned data when row is expanded

[Kailas_Bidve]

 <clr-main-container>

    <div class="content-container">

      <div class="content-area">

        <clr-datagrid>

          <clr-dg-column>Artifact</clr-dg-column>

          <clr-dg-column>Category</clr-dg-column>

          <clr-dg-row>

            <clr-dg-cell>AAA</clr-dg-cell>

            <clr-dg-cell>111</clr-dg-cell>

            <ng-container ngProjectAs="clr-dg-row-detail" *ngIf="true">

              <clr-dg-row-detail *clrIfExpanded>

                <clr-dg-cell>BBB</clr-dg-cell>

                <clr-dg-cell>222</clr-dg-cell>

              </clr-dg-row-detail>

            </ng-container>

          </clr-dg-row>

          <clr-dg-row>

            <clr-dg-cell>CCC</clr-dg-cell>

            <clr-dg-cell>333</clr-dg-cell>

          </clr-dg-row>

        </clr-datagrid>

</div>

</div>

</clr-main-container>

This is my code when I run this on VCD it gives me following output , when expanded the row gets shifted to right side