Here is how I made single line ‘from’ from you code:

  <div className="Search">
      <form class="form-inline">
        <label> Driver ID:</label>
        <input name="driverID" />
        <label> Day:</label>
        <DatePicker />
        <input type="submit" value="Search" />
      </form>
    </div>

Then at the top of this file I added:

import "./App.css";  //App.css is name of the css file.

Here is code in my App.css:

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

This made sure that all the inputs, labels and buttons remain in the first line.

I’m using react datepicker component (https://reactdatepicker.com/) in a div with others elements in the same line.

When I click on the input date and the calendar is shown, it brokes the page structure, moving the search button to the bottom.

I have no experience with html or css so I kind of stuck here.

My html code is quite simple:

 <div className="Search">
        <form>
          <label> Driver ID:
          <input name="driverID" />
          </label>
          <label>  Day:
          <DatePicker/>
          </label>
          <input type="submit" value="Search" />
        </form >
      </div>