Right justify a component within a div in React

Issue

Suppose:

props.data1 = 'data1' and props.data2 = 'data2'

In React, I have the following code:

      <div>
        {props.data1}&emsp;&emsp;&emsp;&emsp;{props.data2}
      </div>

Which appears like: data1 data2.

What I am trying to do is right justify only data2 so it looks like the following:

data1 data2

Assuming that is the furthest data2 can be pushed horizontally. Is there any tag/CSS that I can add to enable this? I've tried using span, but it causes data2 to be pushed to a newline in React.

Solution

So to achieve this you'll need two child elements on the HTML side like so:

<div class="container">
<span>data1</span>
<span>data2</span>
</div>

css:

.container {
display:flex;
flex-direction: row;
justify-content: space-between;
}

Answered By - Mbistami