Right justify a component within a div in React-CodePudding

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.

CodePudding user response：

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

<div >
<span>data1</span>
<span>data2</span>
</div>

css:

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

CodePudding user response：

If you don't mind adding the contained text in their own elements you can use display: flex; on the containing div, and set its justify-content attribute to space-between.

.container {
  width: 300px;
  border: 1px solid salmon;
  display: flex;
  justify-content: space-between;
}

<div >
  <span>data1</span>
  <span>data2</span>  
</div>

CodePudding user response：

If you are triyng to separate the texts, you can use css flex.

<div style="width: 100%; display: flex; justify-content: space-between">
  <span>{data1}</span>
  <span>{data2}</span>
</div>

CodePudding user response：

You can try this:

.wrapper {
  display: flex;
  justify-content: space-between;
}

<div >
  <p>data1</p>
  <p>data2</p>
</div>