I'm facing an issue with the code snippet below
<div className="row">
<div className="col-md-3">
<DateTimePickerComponent
id="dateFrom"
name="dateFrom"
placeholder="Date from"
/>
<div className="d-flex align-items-center error-container">
{searchForm.touched.dateFromError && Boolean(searchForm.errors.dateFromError) && (
<span className="text-danger small">{searchForm.errors.dateFromError}</span>
)}
</div>
</div>
<div className="col-md-4">
<DateTimePickerComponent
id="dateTo"
name="dateTo"
placeholder="Date to"
/>
<div className="d-flex align-items-center error-container">
{searchForm.touched.dateFromError && Boolean(searchForm.errors.dateFromError) && (
<span className="text-danger small">{searchForm.errors.dateFromError}</span>
)}
</div>
</div>
<div className="col-md-4 d-flex align-items-center middle-align">
<DropDownListComponent
id="vouType"
dataSource={sessionLists}
/>
<Button variant="outlined">Detail</Button>
</div>
</div>
</div>
After running this code, I noticed that the DropDownListComponent and button appear as shown in this image
I want to center them vertically aligned with the text box like this image