Bootstrap rowspan not aligned from the top - html

Question

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?
starter.component.html code:
<div class="card" *ngIf="loading"><div class="card-body pt-0"><div class="k-i-loading">Carregando informaçães do dashboard...</div></div></div>
<div class="row" *ngxPermissionsOnly="['GERENTE_FINANCEIRO', 'ADMINISTRATIVO_FINANCEIRO']">
<div class="col-lg-8 col-md-8 col-sm-8">
<detalhes-titulos [titulos]="titulosDespesaData" [tipo]="DESPESA" [loading]="loading"></detalhes-titulos>
</div>
<div class="col-lg-8 col-md-8 col-sm-8">
<detalhes-titulos [titulos]="titulosDespesaData" [tipo]="DESPESA" [loading]="loading"></detalhes-titulos>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div *ngFor="let item of contasData" class="card col-lg-12 col-md-12 col-sm-12">
<div class="card-body">
<h6 class="text-muted m-t-10 m-b-0"><span style="background: #56c0d8;" class="lstick"></span>{{ item.nome }}</h6>
<h2 [ngClass]="{'text-info': item.saldo > 0, 'text-danger': item.saldo < 0}">{{ item.saldo | currency:'BRL':'symbol':'1.2-2':'pt' }}</h2>
</div>
</div>
</div>
</div>
starter-detalhes-titulos.component.html
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card">
<div class="card-body">
<div class="d-flex no-block">
<div>
<h4 class="card-title"><span style="background: #56c0d8;" class="lstick"></span>Títulos a {{ tipo === 0 ? 'receber' : 'pagar'}} nos próximos 10 dias</h4>
</div>
</div>
<div class="table-responsive m-t-20" *ngIf="titulos.length > 0">
<table class="table vm no-th-brd pro-of-month">
<thead>
<tr>
<th>Número</th>
<th class="text-center">Emissão</th>
<th class="text-center">Vencimento</th>
<th class="text-right">Valor</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of titulos">
<td><span class="p-1 text-white font-weight-bold rounded small vitai-bg-color">{{ item.numero }}</span></td>
<td class="text-center">{{ item.emissao | date:"dd/MM/yyyy" }}</td>
<td class="text-center">{{ item.vencimento | date:"dd/MM/yyyy" }}</td>
<td class="text-right text-info" *ngIf="item.natureza === 0">{{ item.valor | currency:'BRL':'symbol':'1.2-2':'pt' }}</td>
<td class="text-right text-danger" *ngIf="item.natureza === 1">- {{ item.valor | currency:'BRL':'symbol':'1.2-2':'pt' }}</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive m-t-20" *ngIf="titulos.length === 0">
<table class="table vm no-th-brd pro-of-month">
<tbody>
<tr>
<td class="text-center" *ngIf="loading">Carregando títulos a {{ tipo === 0 ? 'receber' : 'pagar'}} nos próximos dez dias.</td>
<td class="text-center" *ngIf="!loading">Nenhum título a {{ tipo === 0 ? 'receber' : 'pagar'}} encontrado nos próximos dez dias.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
EDIT:
If I change starter.component.html code to:
<div class="card" *ngIf="loading"><div class="card-body pt-0"><div class="k-i-loading">Carregando informaçães do dashboard...</div></div></div>
<div class="row" *ngxPermissionsOnly="['GERENTE_FINANCEIRO', 'ADMINISTRATIVO_FINANCEIRO']">
<div class="col-lg-8 col-md-8 col-sm-8">
<detalhes-titulos [titulos]="titulosDespesaData" [tipo]="DESPESA" [loading]="loading"></detalhes-titulos>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div *ngFor="let item of contasData" class="card col-lg-12 col-md-12 col-sm-12">
<div class="card-body">
<h6 class="text-muted m-t-10 m-b-0"><span style="background: #56c0d8;" class="lstick"></span>{{ item.nome }}</h6>
<h2 [ngClass]="{'text-info': item.saldo > 0, 'text-danger': item.saldo < 0}">{{ item.saldo | currency:'BRL':'symbol':'1.2-2':'pt' }}</h2>
</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8">
<detalhes-titulos [titulos]="titulosDespesaData" [tipo]="DESPESA" [loading]="loading"></detalhes-titulos>
</div>
</div>
I get the following layout which could be almost what I want:
Now I just need the second box at left closer to the first one.

Answer 1

Well you need to define what you want here.
Simply putting top-left box and the bottom-left box in the 8/12 column and those little boxes on the right in the 4/12 column will fix your problem:
<div class="row">
<div class="col-sm-8">
<detalhes-titulos [titulos]="titulosDespesaData" />
<detalhes-titulos [titulos]="titulosDespesaData" />
</div>
<div class="col-sm-4">
<div *ngFor="" class="card">
...
</div>
</div>
</div>
But I don't know if that's what you want, especially you didn't define what you want for different breakpoints.