title: Bootstrap rowspan not aligned from the top
body: <p><a href="https://i.stack.imgur.com/UeWEt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UeWEt.png" alt="r" /></a></p>
  <p>I need the boxes aligned at right also vertically aligned with the first box at left, but now these boxes are only aligned with the last vertical box at the left. How can I achieve that?</p>
  <p>starter.component.html code:</p>
  <pre><code>&lt;div class=&quot;card&quot; *ngIf=&quot;loading&quot;&gt;&lt;div class=&quot;card-body pt-0&quot;&gt;&lt;div class=&quot;k-i-loading&quot;&gt;Carregando informa&amp;ccedil;&amp;atilde;es do dashboard...&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;div class=&quot;row&quot; *ngxPermissionsOnly=&quot;['GERENTE_FINANCEIRO', 'ADMINISTRATIVO_FINANCEIRO']&quot;&gt;
      &lt;div class=&quot;col-lg-8 col-md-8 col-sm-8&quot;&gt;
          &lt;detalhes-titulos [titulos]=&quot;titulosDespesaData&quot; [tipo]=&quot;DESPESA&quot; [loading]=&quot;loading&quot;&gt;&lt;/detalhes-titulos&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-lg-8 col-md-8 col-sm-8&quot;&gt;
          &lt;detalhes-titulos [titulos]=&quot;titulosDespesaData&quot; [tipo]=&quot;DESPESA&quot; [loading]=&quot;loading&quot;&gt;&lt;/detalhes-titulos&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-lg-4 col-md-4 col-sm-4&quot;&gt;
          &lt;div *ngFor=&quot;let item of contasData&quot; class=&quot;card col-lg-12 col-md-12 col-sm-12&quot;&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                  &lt;h6 class=&quot;text-muted m-t-10 m-b-0&quot;&gt;&lt;span style=&quot;background: #56c0d8;&quot; class=&quot;lstick&quot;&gt;&lt;/span&gt;{{ item.nome }}&lt;/h6&gt;
                  &lt;h2 [ngClass]=&quot;{'text-info': item.saldo &gt; 0, 'text-danger': item.saldo &lt; 0}&quot;&gt;{{ item.saldo | currency:'BRL':'symbol':'1.2-2':'pt' }}&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>starter-detalhes-titulos.component.html</p>
  <pre><code>&lt;div class=&quot;col-lg-12 col-md-12 col-sm-12&quot;&gt;
      &lt;div class=&quot;card&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
              &lt;div class=&quot;d-flex no-block&quot;&gt;
                  &lt;div&gt;
                      &lt;h4 class=&quot;card-title&quot;&gt;&lt;span style=&quot;background: #56c0d8;&quot; class=&quot;lstick&quot;&gt;&lt;/span&gt;T&amp;iacute;tulos a {{ tipo === 0 ? 'receber' : 'pagar'}} nos pr&amp;oacute;ximos 10 dias&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;table-responsive m-t-20&quot; *ngIf=&quot;titulos.length &gt; 0&quot;&gt;
                  &lt;table class=&quot;table vm no-th-brd pro-of-month&quot;&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;N&amp;uacute;mero&lt;/th&gt;
                              &lt;th class=&quot;text-center&quot;&gt;Emiss&amp;atilde;o&lt;/th&gt;
                              &lt;th class=&quot;text-center&quot;&gt;Vencimento&lt;/th&gt;
                              &lt;th class=&quot;text-right&quot;&gt;Valor&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr *ngFor=&quot;let item of titulos&quot;&gt;
                              &lt;td&gt;&lt;span class=&quot;p-1 text-white font-weight-bold rounded small vitai-bg-color&quot;&gt;{{ item.numero }}&lt;/span&gt;&lt;/td&gt;
                              &lt;td class=&quot;text-center&quot;&gt;{{ item.emissao | date:&quot;dd/MM/yyyy&quot; }}&lt;/td&gt;
                              &lt;td class=&quot;text-center&quot;&gt;{{ item.vencimento | date:&quot;dd/MM/yyyy&quot; }}&lt;/td&gt;
                              &lt;td class=&quot;text-right text-info&quot; *ngIf=&quot;item.natureza === 0&quot;&gt;{{ item.valor | currency:'BRL':'symbol':'1.2-2':'pt' }}&lt;/td&gt;
                              &lt;td class=&quot;text-right text-danger&quot; *ngIf=&quot;item.natureza === 1&quot;&gt;- {{ item.valor | currency:'BRL':'symbol':'1.2-2':'pt' }}&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;table-responsive m-t-20&quot; *ngIf=&quot;titulos.length === 0&quot;&gt;
                  &lt;table class=&quot;table vm no-th-brd pro-of-month&quot;&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td class=&quot;text-center&quot; *ngIf=&quot;loading&quot;&gt;Carregando t&amp;iacute;tulos a {{ tipo === 0 ? 'receber' : 'pagar'}} nos pr&amp;oacute;ximos dez dias.&lt;/td&gt;
                              &lt;td class=&quot;text-center&quot; *ngIf=&quot;!loading&quot;&gt;Nenhum t&amp;iacute;tulo a {{ tipo === 0 ? 'receber' : 'pagar'}} encontrado nos pr&amp;oacute;ximos dez dias.&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>EDIT:</strong></p>
  <p>If I change starter.component.html code to:</p>
  <pre><code>&lt;div class=&quot;card&quot; *ngIf=&quot;loading&quot;&gt;&lt;div class=&quot;card-body pt-0&quot;&gt;&lt;div class=&quot;k-i-loading&quot;&gt;Carregando informa&amp;ccedil;&amp;atilde;es do dashboard...&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;div class=&quot;row&quot; *ngxPermissionsOnly=&quot;['GERENTE_FINANCEIRO', 'ADMINISTRATIVO_FINANCEIRO']&quot;&gt;
      &lt;div class=&quot;col-lg-8 col-md-8 col-sm-8&quot;&gt;
          &lt;detalhes-titulos [titulos]=&quot;titulosDespesaData&quot; [tipo]=&quot;DESPESA&quot; [loading]=&quot;loading&quot;&gt;&lt;/detalhes-titulos&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-lg-4 col-md-4 col-sm-4&quot;&gt;
          &lt;div *ngFor=&quot;let item of contasData&quot; class=&quot;card col-lg-12 col-md-12 col-sm-12&quot;&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                  &lt;h6 class=&quot;text-muted m-t-10 m-b-0&quot;&gt;&lt;span style=&quot;background: #56c0d8;&quot; class=&quot;lstick&quot;&gt;&lt;/span&gt;{{ item.nome }}&lt;/h6&gt;
                  &lt;h2 [ngClass]=&quot;{'text-info': item.saldo &gt; 0, 'text-danger': item.saldo &lt; 0}&quot;&gt;{{ item.saldo | currency:'BRL':'symbol':'1.2-2':'pt' }}&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-lg-8 col-md-8 col-sm-8&quot;&gt;
          &lt;detalhes-titulos [titulos]=&quot;titulosDespesaData&quot; [tipo]=&quot;DESPESA&quot; [loading]=&quot;loading&quot;&gt;&lt;/detalhes-titulos&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I get the following layout which could be almost what I want:</p>
  <p><a href="https://i.stack.imgur.com/cnFjQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cnFjQ.png" alt="enter image description here" /></a></p>
  <p>Now I just need the second box at left closer to the first one.</p>