Struggling to position a button next to a dropdown? No matter what I attempt, the button keeps ending up above the dropdown. Ideally, I'd like it to appear alongside 'Select Organisation' as shown in the image below:
https://i.sstatic.net/wXchb.png
Here's the code snippet with the InputSelect and the troublesome button:
<div class="form-group row mb-3">
<div class="col-auto">
<div class="form-floating">
<InputSelect id="Organisation" class="form-select" @bind-Value="Meeting.OrganisationId">
<option value="0">Select Organisation:</option>
@foreach (var org in Organisations)
{
<option value="@org.Id">@org.Name</option>
}
</InputSelect>
<button type="button" class="btn btn-primary d-flex justify-content-end"><span class="oi oi-plus"></span></button>
<label for="Organisation">Organisation</label>
</div>
<ValidationMessage For="@(() => Meeting.OrganisationId)" />
</div>
I've experimented with float-end and pull-left too.