I am trying to create a search form within a page using Bootstrap 5 and the following code:

        <div >
            <div >
                <form  role="form">
                    <label for="field">Find all where...</label>
                    <select id="field" >
                        <option value="company_name" selected>Company Name</option>
                        <option value="federal_ein" selected>EIN</option>
                        <option value="state">State</option>
                        <option value="city">City</option>
                    </select>
                    <label for="term">includes...</label>
                    <input type="text"  id="term" placeholder="Enter full/partial term" name="term">
                    <button type="submit" >Search</button>
                </form>
            </div>
        </div>

I want the form to be inline, with the text box stretched to fill unused space in the row. I can't figure out how to achieve this. Any help on it? Thanks!

CodePudding user response：

This code seems to work well. Thanks!

<form id="frmSearch" name="frmSearch" role="form" >
            <div >
                <div >Find companies where...</div>
                <div >
                    <select ID="ddlType" Class="form-control rounded" required>
                        <option value="" selected>Search by...</option>
                        <option value="company_name">Company Name</option>
                        <option value="city">City</option>
                        <option value="federal_ein">EIN</option>
                        <option value="state">State</option>
                    </select>
                </div>
                <div >contains...</div>
                <div >
                    <input type="text" ID="tbTerm"  required />
                </div>
                <div >
                    <button type="submit" ID="btnSearch" >Search</button>
                </div>
            </div>
        </form>