Reactjs: css causes reactjs result to jam together - css

Question

The code below displays result from reactjs arrays and everything is okay.
What Am now trying to achieve:
I am now trying to display reactjs results at the right hand side using css.
To this effect, I have created a Css class called Side-Bar within user.css files.
Here is my issue:
when I run the reactjs code with the css, the Css causes the reactjs result to be jammed with each other but
If I remove the css, everything will be displayed (but with no css to position at the right)
below is where and how am calling the css class className="sidebar"
<div className="sidebar">
<ul>
<div key={this.props.data.id}>
<button >{this.props.data.name}</button>
</div>
</ul>
</div>
user.css
.sidebar {
width: 20%;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 50px;
padding-bottom: 10px;
border: 1px solid #b2b2b2;
text-align: bottom;
}
Reactjs code
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import './user.css';
class Person extends React.Component {
state = { open: false };
render() {
return (
<React.Fragment>
<div className="sidebar">
<ul>
<div key={this.props.data.id}>
<button >{this.props.data.name}</button>
</div>
</ul>
</div>
</React.Fragment>
);
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
showBox: false,
data: [
{ id: "1", name: "user 1" },
{ id: "2", name: "user 2" },
{ id: "3", name: "user 3" },
{ id: "4", name: "user 4" },
{ id: "5", name: "user 5" }
]
};
}
render() {
return (
<div>
{this.state.data.map(person => (
<Person key={person.id} data={person} />
))}
</div>
);
}
}

Answer 1

Resolved using flex as per code below which i implement inside user.css files and then call it as class
.sidebar{
display: flex; justify-content: flex-end
}