How to add space between two elements on the same line with React?

Sometimes, we want to add space between two elements on the same line with React.

In this article, we’ll look at how to add space between two elements on the same line with React.

How to add space between two elements on the same line with React?

To add space between two elements on the same line with React, we can use flexbox.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <div>foo</div>
      <div>bar</div>
    </div>
  );
}

We set the style prop of the outer div to { display: "flex", justifyContent: "space-between" } to make the div have a flexbox layout.

Then we can set justifyContent to "space-between" to display the 2 inner divs at the 2 ends of the outer div.

Conclusion

To add space between two elements on the same line with React, we can use flexbox.