My goal is to design a webform where users can enter the dates they want to take off from work. I have two div classes that I want to align horizontally and when the "Add Dates" button is clicked, another line should be added.
I attempted to place the two divs inside a larger div and set the style to inline.
<div class = "Leave" style="display: inline">
<h4>Select Leave Code</h4>
<mat-form-field>
<select matNativeControl required>
<option value="personal">Personal Leave</option>
<option value="vacation">Vacation Leave</option>
<option value="sick">Sick Leave</option>
</select>
</mat-form-field>
<div class = "Dates">
<mat-form-field>
<input matInput [matDatepicker]="picker1" placeholder="From" [formControl]="date">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="picker2" placeholder="To"
[formControl]="serializedDate">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
</div>
button
<div class = "adder">
<div class = "sub">
<button mat-raised-button color="primary">Add Dates+</button>
</div>
</div>
I am attempting to attach a screenshot, but currently it appears like a pyramid. The Leave code dropdown is on top and the two calendar icons are on the next line side by side