Solution 1 :

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" />

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.

Problem :

I’m using react datepicker component ( 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">
          <label> Driver ID:
          <input name="driverID" />
          <label>  Day:
          <input type="submit" value="Search" />
        </form >


Comment posted by Robert Hovhannisyan

Sorry, can you show the css code?

Comment posted by user1116714

@RobertHovhannisyan Hi! The problem still persists with any kind of css code applied.