How to put text inside ListItem on the right side?

Question

I have these now, and the "YoYo" text are aligned to the left (as default). And I'd like to control the "YoYo" texts' positions so some of them could appear on the right.

I tried to supply a style object with justifyContent:'flex-end' or alignSelf:'flex-end' but none of them is working.

  <List>
    <ListItem containerElement={<ChatObject id='1' value="YoYo" style={{alignSelf:'flex-end'}} />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
  </List>

The ChatObject is defined as:

render() {
    return (
      <TextField
        id={this.props.id}
        value={this.props.value}
        underlineShow={false}
      />
    );
  }

Answer 1

I successfully did it with this:

<ListItem style={{display:'flex', justifyContent:'flex-end'}} >
  <ChatObject id={item.id} value={item.value} />
</ListItem>

The key here is to add display:'flex'.