Aligning controls using html / bootstrap - html

Question

I am trying to align the controls in my angular 8 application. Basically I need to align the Amount column like shown in the screenshot below. Could somebody tell me how to achieve that. Currently using col-sm-5 for Amount column. If I do col-sm-6 it would push the edit button further out which i don't want.I need to get the textbox upto the red line shown in screenshot 1
screenshot 1
Screenshot 2
<form [formGroup]="settlementForm" (ngSubmit)="addAccount()" class="form-horizontal argentex-form" novalidate>
<div class="modal-body">
<div *ngIf="messageViewerModel.messages.length > 0" class="viewer">
<app-message-viewer [messageViewer]="messageViewerModel"></app-message-viewer>
</div>
<!-- Remaining balanace input -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Remaining Balance</label>
<div class="col-sm-6">
<currency class="form-control" [stringModel]="remainingBalance()" [isDisabled]="true"></currency>
</div>
</div>
<!-- Dropdown Accounts -->
<div class="form-group">
<label class="col-sm-4 control-label">Account</label>
<div class="col-sm-6">
<div class="selectdiv">
<select class="form-control" id="selectedAccount" #selectedAccountID
name="selectedAccountFormControl" formControlName="selectedAccountFormControl">
<option *ngFor="let account of accounts; let ind=index;" value="{{ ind }}"
ngDefaultControl>
{{ account.accountName }}
</option>
</select>
</div>
</div>
</div>
<!-- Amount in the traded currency -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Amount ({{settlement.tradedCurrency}})</label>
<div class="col-sm-5">
<currency class="form-control" [isDisabled]=editMode [(numModel)]="settlement.amount" [stringModel]="settlement.amount"
[required]="true" [readonly]="settlement.isPayTotal"></currency>
</div>
<div class="col-sm-1" style="padding-top: 5px">
<!-- settlement?.isPayTotal -->
<div *ngIf="editMode">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt=""/>
</a>
</div>
<div *ngIf="!editMode">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt=""/>
</a>
</div>
</div>
</div>
<!-- Value Date -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Value Date</label>
<div class="col-md-6">
<input type="text"
name="valueDate"
formControlName="valueDate"
class="form-control"
[(ngModel)]="settlement.valueDate"
bootstrapDatepicker />
</div>
</div>
<!-- Reference -->
<div class="form-group">
<label class="col-sm-4 control-label">Reference</label>
<div class="col-sm-6">
<input type="text" formControlName="reference" name="reference" class="form-control"
[(ngModel)]="settlement.reference" />
</div>
</div>
</div>
<div class="modal-footer">
<hr>
<button type="submit" class="btn" [disabled]="settlementForm.disabled || !settlementForm.valid || selectedAccountID.value <= 0 || !settlement.amount" >Save</button>
<button type="button" class="btn btn-close" (click)="closeModal()">Cancel</button>
</div>
</form>
Proposed solution
Its near but not still what I want
screenshot
Used the folowing css
.custom-css-input {
width: 100%;
/* float: left; */
}
.icon-button {
width: 40px;
float: left;
}
p.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
}
Following html
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Amount ({{settlement.tradedCurrency}})</label>
<div class="col-sm-5" >
<currency class="form-control custom-css-input" [(numModel)]="settlement.amount" [(stringModel)]="settlement.amount"
[isDisabled]=!editMode [required]="true" ></currency>
</div>
<div style="padding-top: 5px">
<div *ngIf="!editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt="" />
</a>
</div>
<div *ngIf="editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt="" />
</a>
</div>
</div>
<p class="clear"></p>
</div>

Answer 1

sry for not posting bootstrap solution, but if you are in hurry, simple css can work for you. I have added three custom css classes (custom-css-input,icon-button,clear), .clear is only there if floats disturb the rest of your form, but that's just in case. You can play width calc width and fixed width in order to achive your desired look. (Wrap whole input+button component in one single column and play inside with widths)
.custom-css-input {
width: calc(100% - 50px);
float: left;
}
.icon-button {
width: 40px;
float: right;
}
p.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
}
<div class="col-sm-6">
<currency class="form-control custom-css-input" [isDisabled]=editMode [(numModel)]="settlement.amount" [stringModel]="settlement.amount" [required]="true" [readonly]="settlement.isPayTotal"></currency>
<div *ngIf="editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt="" />
</a>
</div>
<div *ngIf="!editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt="" />
</a>
</div>
<p class="clear" />
</div>