I am currently working on a React application where I need to align 2 links and a button in a row under a div. However, only the links are aligning in a row, not the form fields. Below is my code snippet:
<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;
}Can anyone suggest how I can resolve this issue? Thank you!