How to use flexbox to place a button on to the right side of InputSelect?-CodePudding

I'm trying to place a button on the right of a dropdown however everything I try, it seems to place the button above the dropdown. I'd need it next to 'Select Organisation' in the below picture.

I've got the below code which includes the InputSelect and the button in question

 <div >
    <div >
        <div >
            <InputSelect id="Organisation"  @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" ><span ></span></button>
            <label for="Organisation">Organisation</label>
        </div>
        <ValidationMessage For="@(() => Meeting.OrganisationId)" />
    </div>

I've also tried float-end and pull-left

CodePudding user response：

I've added flex-direction to the parent of the button and the inputselect, this should work for you.

.container {
  display: flex;
  flex-direction: row;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
 <div >
    <div >
        <div >
            <InputSelect id="Organisation"  @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" ><span >Button</span></button>
            <label for="Organisation">Organisation</label>
        </div>
        <ValidationMessage For="@(() => Meeting.OrganisationId)" />
    </div>