Put input text and submit button same line-CodePudding

I am writing a search box and search submission button, I try several way to make the button and text box in same line, but doesn't work. Here is my code.

  return (
    <Form onSubmit={submitHandler} inline>
      <Form.Control
        type='text'
        name='q'
        onChange={(e) => setKeyword(e.target.value)}
        placeholder='Serach product'
        className='mr-sm-2 ml-sm-5'
      ></Form.Control>
      <Button type='submit' variant='btn btn-success' className='p-2'>
          search
      </Button>
    </Form>
  )

What I expect is

But what I have is

Reactjs version is ^17.0.1 in my package.jason file, but when I use npm info react in cmd it shows me [email protected]

Thanks the answer from Mr.Gandhi https://stackoverflow.com/a/72385731/19202374

CodePudding user response：

Change the input and/or the button to be display: inline in the css Or you can just put display flex on the parent container of the input and button.

CodePudding user response：

Wrap your form elements in a div and give a className (ex: flex-container).

return (
    <Form onSubmit={submitHandler} inline>
      <div className="flex-container">
                <Form.Control
                    type='text'
                    name='q'
                    onChange={(e) => setKeyword(e.target.value)}
                    placeholder='Serach product'
                    className='mr-sm-2 ml-sm-5'
                ></Form.Control>
                <Button type='submit' variant='btn btn-success' className='p-2'>
                        search
                </Button>
        </div>
    </Form>
  )

After that add below css

.flex-container {
  display: flex;
}