Individually align elements within a Navigation Bar

Question

I am trying to create a frontend using ReactJS. The different components of the page are being created using tabler-react.

I am trying to create a navigation panel using the Nav component in tabler-react. The return function looks like this:

return ( 
            <Nav >
                <Nav.Item to='#' value="Item1" />
                <Nav.Item to='#' value="Item2" />
                <Nav.Item to='#' value="Item3" />
                <Nav.Item to='#' value="Item4" />
            </Nav>
         );

It is by default displayed one after the other in a row, starting from the left-most side of the screen.

I wish to display the items in such a way that 'item1' and 'item2' are displayed in the left-most side and 'item3' and 'item4' get displayed at the right-most end. I am facing trouble doing this.

I searched for a solution and understand that a style property can be set to the tags which can do things like justifyContent, alignment etc. I tried setting such style properties to the individual tags inside , but it doesn't cause any change in the rendered page.

I am new to ReactJS and javascript in general. So I am not sure if this is a basic mistake I am doing. Any help is appreciated. Thanks.

Answer 1

This is quick fix

return ( 
            <Nav >
                <Nav.Item to='#' value="Item1" />
                <Nav.Item to='#' value="Item2" />
                 <div style={{
                       marginLeft: 'auto'
                 }} />
                <Nav.Item to='#' value="Item3" />
                <Nav.Item to='#' value="Item4" />
            </Nav>
         );