Change width of form-inline input and label

I'm trying to change the width of an entire form-inline- both the input and label.
You can see the search box and label on this page drops down and I would like it to fit on the same line. https://dev.vmc.w3.uvm.edu/xana/CI4/data/archive/project/1977-1985_Vermont_Sugarbush_Health_Survey/dataset/1977-vermont-sugarbush-health-survey-tree/data#

<div class="query-editor-here " style="display:inline; ">
  <div class="recline-query-editor ">
    <form action=" " method="GET " class="form-inline ">
      <div class="input-prepend text-query ">
        <span class="add-on "><i class="icon-search "></i></span>
        <label>Search</label>
        <input type="text " name="q " value=" " class="span2 form-control " placeholder="Search data ... ">
      </div>
      <button type="submit " class="btn ">Search</button>
    </form>
  </div>
</div>

Here is the code for the entire line, but the above code is the code I am targeting to change

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="recline-data-explorer ">
  <div class="alert-messages "></div>
  <div class="header clearfix ">
    <div class="navigation ">
      <div class="btn-group " data-toggle="buttons-radio ">
        <a href="#grid " data-view="grid " class="btn btn-secondary active ">Table</a>
        <a href="#graph " data-view="graph " class="btn btn-secondary ">Graph</a>
      </div>
    </div>
    <div class="recline-results-info "> Displaying <span class="doc-count ">1000</span> records
    </div>
    <div class="recline-pager ">
      <div class="pagination ">
        <nav aria-label="Page navigation ">
          <ul class="pagination d-flex ">
            <li class="prev action-pagination-update page-item "><a class="page-link " href=" ">«</a></li>
            <li class="active page-item "><label for="from ">From</label><a class="page-link "><input name="from " type="text " value="1 "> – <label for="to ">To</label><input name="to " type="text " value="100 "> </a></li>
            <li class="next action-pagination-update page-item "><a class="page-link " href=" ">»</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="menu-right ">
      <div class="btn-group " data-toggle="buttons-checkbox ">
        <a href="# " data-action="filterEditor " class="btn btn-secondary ">Filter</a>
        <a href="# " data-action="fieldsView " class="btn btn-secondary active " aria-pressed="true ">Fields</a>
      </div>
    </div>
    <div class="query-editor-here " style="display:inline; ">
      <div class="recline-query-editor ">
        <form action=" " method="GET " class="form-inline ">
          <div class="input-prepend text-query ">
            <span class="add-on "><i class="icon-search "></i></span>
            <label>Search</label>
            <input type="text " name="q " value=" " class="span2 form-control " placeholder="Search data ... ">
          </div>
          <button type="submit " class="btn ">Search</button>
        </form>
      </div>
    </div>
  </div>

I tried adding w-50 to the input, but that created space between the input and label, but left the entire form the same width. I tried changing the width of <div class="recline-query-editor ">, first by using w-50 but that caused the div to take up 50% of the entire line, and then by adding style="width:100;" but that made the search label drop below the search box.

How do I change the width of the form?

I was able to slightly adjust your code to get it to fit on one line. You could certainly add additional code to dynamically adjust the sizes of these elements within your ~container div <div class="header clearfix">.

I pinpointed the source of your issue. Three things I adjusted:

1. Apply your w-75 class to your element and remove the width: 75% !important; style that is included in that class.
2. Next you need to update your media query width style that is assigned to your Input Search Element. The width is set to auto. When I adjust and add an actual width such as 100px it all fits on one line. Not perfect but it should get you going in the right direction.
3. Last I added some space between your Input and the Button using a <span> tag and set the InnerHTML text to &nbsp. You could probably instead update some margins but adding a Span tag to get the point across was easy enough.

Screenshot Dev Tools:

Screenshot of your site with adjustments: