Getting the CSS right on a sticky bar in ReactJS - css

Question

I'm trying to make a header that UX/UI has made on an inhouse project. Above the header there's a closeable bar. I want to have it sticky so that it's above the header and not on the header. I'm having trouble getting the CSS right. I can't seem to move the X mark to the right while keeping the rest of the text centered.
Here is my code (heavily modified and probably a bit to much trying to get it right.
JSX:
<>
{!bar && (
""
)}
{bar && (<div className="barClass">
<div className="pClass">
<p className="somethingP"> Something very important!</p>
<p className="readMoreLink">Read more</p>
</div>
<div className="buttonClass">
<button className="barButton" type="button" onClick={removeBar} >X </button>
</div>
</div>)}
</>
CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.barClass {
background-color: rgb(196,49,196);
position: sticky;
flex-direction: row;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
color: white;
}
.somethingP {
margin-right: 10px;
}
.readMoreLink {
text-decoration: underline;
}
.pClass {
display: flex;
justify-content: center;
align-items: center;
}
.buttonClass {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
}
.barButton {
align-self: flex-end;
background-color:rgb(196,49,196) ;
color: white;
border: none;
}

Answer 1

As I get it, your concern here is to position the close button to the right. One way to do it would be like that :
.barButton {
position: absolute; /* allow us to position it where we want on the bar*/
top: 50%; /* this will put the top of the close button to the center of
the bar */
right: 20px; /* Arbitrary, it's up to you*/
transform: translateY(-50%); /* trick to make the button to go up by 50% of its proper height, so it will be perfectly vertically centered*/
background-color:rgb(196,49,196) ;
color: white;
border: none;
}