Form in div element not aligning in one row-CodePudding

I am working on a react app where I have to align 2 links and a button in a row under a div but only the links are aligning in row not the form fields. Here's my code:

<div className='header'>
     
    <a>Privacy policy</a>

    <a>Terms and conditions</a>
    
    <Form
      state={state}
      onClick={() => {
        setState(true);
        inputFocus.current.focus();
      }}
      onSubmit={onFormSubmit}
      ref={node}
    >
      <Button type="submit" state={state}>
        <FontAwesomeIcon icon={'search'} size="1x" />
      </Button>
      <Input
        onChange={e => setInput(e.target.value)}
        ref={inputFocus}
        value={input}
        state={state}
        placeholder="Search for a movie..."
      />
    </Form>
    </div>

Here's my css:

.header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

How can I fix this?

CodePudding user response：

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
    margin: 0 auto;
}

CodePudding user response：

.header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content:center;
}