Aligning few components horizontally in React

Question

I have three big component. Two of thes takes something like 1/3 of the screen and my goal is to present them at the horizontally from left to right.

When just putting them like in the code I added, they presented one after another Vertically which causing the uder to scroll down to find them. How can I present them in horizontally on the screen ? (I tried a couple of things with css with no success).

This is the return method, the Tables component contains two different tables inside of it:

 return (
      <div>
        {title} <Chat />
        <Tables/>}

      </div>
    );

Answer 1

You should take a look at flexboxes !

As you probably know, React lets you create component, so you can style them just like html elements with flexboxes.

Definitely give this article a read!

Edit: EXAMPLE

HTML:

<div class="flexbox-container">
    <div>Element1</div>
    <div>Element2</div>
    <div>Element3</div>
</div>

CSS:

.flexbox-container {
    display: flex;
    flex-direction: row;
}

This will align your elements horizontally with even spacing! Try playing with the container's margins and justify-elements to align elements.