reactjs - Assigning CSS at individual level

Question

How to place "SUCCESS" button in the next line aligned to the left. And how do i assign CSS properties at individual ReactSearchBox and Button tag .Below is the image of my app

My App

function NavBarComponent() {
    
 return (
        <div  className="name-input-css">
            <ReactSearchBox  className="name-css" // this CSS is not working
                placeholder="Name"
                value="Name"
                data={"A"}
                callback={record => console.log(record)}
                inputBoxHeight="30px"
            />

            <ReactSearchBox 
                placeholder="Placeholder"
                value="Age"
                data={100}
                callback={record => console.log(record)}
                inputBoxHeight="30px"
            />
            
            <Button variant="success">Success</Button>{' '}


        </div>
    );
}

Below is the CSS file

.name-input-css{
    display: flex;
    /* vertical | horizontal */
     margin: 5% auto;
}

.name-css{
    order: 2;
}

Answer 1

等待大神答复