dynamically add or remove buttons alignment in form - html

Question

I have a small form designed but it is misaligned. I am trying to align properly but not sure why its becoming so messy. The problem with the design is when i click on plus button the below things happen:
The blue color content right side gets increased and in turn it adds extra space vertically which is messy. I want the blue color content to be at fixed height.
The minus button needs to be placed properly beside its corresponding line.
Also the plus button should be aligned properly.
Can anyone help me out on this.
The below is my code:
<div class="row">
<div class="col-md-8">
<mat-dialog-content class="mat-typography">
<section *ngFor="let address of endpointsBulk; let i = index;">
<div class="row">
<div>
<!-- <h4>Endpoint {{i + 1}}</h4> -->
</div>
<div class="text-right" *ngIf="endpointsBulk.length > minEndpoints">
<button mat-button color="danger" (click)="removeEndpointForm(i)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="row">
<div>
<mat-form-field class="example-full-width">
<mat-label>Choose Method</mat-label>
<mat-select [(ngModel)]="address.method">
<mat-option value="post">POST</mat-option>
<mat-option value="get">GET</mat-option>
<mat-option value="put">PUT</mat-option>
<mat-option value="delete">DELETE</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="example-full-width">
<input name="search" id="search" [(ngModel)]="address.endpoint" matInput type="search"
placeholder="Endpoint">
</mat-form-field>
</div>
</div>
</section>
<div class="text-right" *ngIf="endpointsBulk.length < maxEndpoints">
<button mat-button color="primary" (click)="addEndpoinForm();">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</mat-dialog-content>
</div>
<div class="col-md-4 callout callout-info no-margin">
<li>Format: post:/api/v1/addAccount/id
<br> Usage :
<ul>
<li>post:/api/v1/addAccount/id</li>
<li>get:/api/v1/getAccount/id</li>
<li>put:/api/v1/updateAccount/id</li>
<li>delete:/api/v1/deleteAccount/id</li>
</ul>
</li>
</div>
</div>
<mat-dialog-actions class="pull-right" align='end'>
<button mat-raised-button class="nav-btn text-primary" type="submit" [disabled]="checkFormValidity()"
(click)="saveEndPoint()">Save</button>
<button mat-raised-button class="nav-btn text-primary" (click)="dialogRef.close()">Cancel</button>
</mat-dialog-actions>
The design is something like below:

Answer 1

You can limit the height of the right side with height: fit-content;
You seem to be putting each element (minus, form) inside a separate row, try using columns instead if you want them next to each other
The alignment of plus is just a matter of putting it in a correct container, please specify what is "aligned properly"