I have been trying since the morning to correctly align the start date and the end date but without success.
The start and end date do not line up like other blocks. I do not understand anything...
If you solve my problem, I will be infinitely grateful to you. I really don't understand why the date blocks are not aligned.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<h1 id="welcome">HTML CSS JS</h1>
<div class="row">
<div class="col-12" *ngIf="currentView == 0">
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-12 col-lg-4">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Libellé</label>
<div class="col-12 col-sm-9">
<input id="name" type="text" class="form-control" [(ngModel)]="search.name"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Libellé" autofocus>
</div>
</div>
<div class="form-group row">
<label for="ticker" class="col-12 col-sm-3 col-form-label">Bourse</label>
<div class="col-12 col-sm-9">
<input id="ticker" type="text" class="form-control" [(ngModel)]="search.ticker"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Bourse" autofocus>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group row">
<label for="isin" class="col-12 col-sm-3 col-form-label">ISIN</label>
<div class="col-12 col-sm-9">
<input id="isin" type="text" class="form-control" [(ngModel)]="search.isin"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="ISIN" autofocus>
</div>
</div>
<div class="form-group row">
<label for="filterForMarkets" class="col-12 col-sm-3 col-form-label">Marché</label>
<div class="col-12 col-sm-9">
<select id="filterForMarkets" class="form-control"
style="width:100%; max-width: 300px;"
(change)="filterForMarkets($event.target.value)">
<option value="">--Tous les marchés--</option>
<option *ngFor="let m of markets" value={{m.marketID}}>
{{m.name}}
</option>
</select>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group" >
<label for="date">Date de départ</label>
<div class="input-group">
<input name="beginDate" id="beginDate" type="text" class="form-control"
style="background-color: white; "
(ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
<input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
(ngModelChange)="changedBeginDate($event)"
style="position: absolute; left: 0; visibility: hidden">
<div class="input-group-append" (click)="dp1.toggle()">
<span class="input-group-text" id="basic-addon2">
<i class="icon-regular i-Calendar-4"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group" >
<label for="date">Date de fin</label>
<div class="input-group">
<input name="endDate" id="endDate" type="text" class="form-control"
style="background-color: white;"
(ngModelChange)="changedEndDateInput($event)" [(ngModel)]="endDate">
<input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp2"
ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="end.validityDate"
(ngModelChange)="changedEndDate($event)"
style="position: absolute; left: 0; visibility: hidden">
<div class="input-group-append" (click)="dp2.toggle()">
<span class="input-group-text" id="basic-addon2">
<i class="icon-regular i-Calendar-4"></i>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 ">
<div class="text-right">
<button type="button" class="btn btn-primary" (click)="launchSearch(modalConfirm)">
Rechercher
</button>
<button type="button" class=" ml-1 btn btn-primary" (click)="getTransactions(0)">
Affichez tous les mouvements
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
