How to create a left-aligned button, center-aligned text, and right-aligned button all in the same line (ReactJS)

Question

Hi I am trying to create two buttons on the left and right edge with some text inbetween them in ReactJS but I cannot figure out the CSS style needed to do this. I tried align, float, etc but it seems like they are coupled together so whenever one moves, the other moves right next to it. Does anyone know how to do this?

This is what I have so far (although I have like 100 different variations):

<React.Fragment style={{float: 'left'}}><button>+</button></React.Fragment>
<React.Fragment style={{float: 'center'}}>Title</React.Fragment>
<React.Fragment style={{float: 'right'}}><button>-</button></React.Fragment>

Answer 1

The easiest way to achieve what you want is to use Css flex like this:

Click On the Run Code snippet

const App = () => {
   return (
      <div style={{display: 'flex', justifyContent: 'space-between'}}>
        <button>+</button>
        <div>Title</div>
        <button>-</button>
      </div>)
}

ReactDOM.render(<App />, document.getElementById('root'));

<div id="root"><div/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

you can use style css of display flex

<div className="wrapper">
<button>1</button>
<button>2</button>
<button>3</button
</div>

style

.wrapper {
display: flex;
width: 100%;
align-content: space-between;
align-direction: column;
}

reference : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container