flexbox: vertically center two divs - html

Question

I have a modal in the center of the screen that has an header.
That header must contain a title and the button to close it.
--------------------------------
| (close)|
| Text |
| |
--------------------------------
So basically I have two requirements:
Every text inside the header must be centred vertically.
Be able to position the "(close)" close to the header in the corner.
Right now I have everything vertically centred but the elements I put inside the header for ma pile:
--------------------------------
| |
| Text |
| (close) |
| |
--------------------------------
.modal-payment__wrapper { // <- this is the whole box
max-width: 50%;
width: 500px;
height: 200px;
background: white;
font-family: 'Lato', 'sans-serif';
}
.modal__header { // <- this is the header
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
height: 50px;
background-color: black;
color: white;
font-size: 16px;
padding-left: 20px;
}
.modal__header__title { // <- this is "text"
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.7em;
padding: 10px;
flex-grow: 0;
flex-srhink: 0;
flex-basis: auto;
align-self: auto;
}
<div class="modal-payment__background">
<div class="modal-payment__wrapper">
<div class="modal__header">
<div>
Text
</div>
<div class="modal__header__x"
#click="closeModal">
x
</div>
</div>
<div class="modal__body">
What am I missing?

Answer 1

There were quite a few errors in the code provided, but I think this is what you need. I had to remove the #click since that's not recognized here.
.modal-payment__wrapper {
max-width: 50%;
width: 500px;
height: 200px;
background: white;
font-family: 'Lato', 'sans-serif';
}
.modal__header {
width: 100%;
height: 50px;
background-color: black;
color: white;
font-size: 16px;
padding-left: 20px;
position: relative;
display: flex;
align-items: center;
}
.modal__header__title {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.7em;
}
.modal__header__x {
position: absolute;
right: .5em;
top: 0;
}
<div class="modal-payment__background">
<div class="modal-payment__wrapper">
<div class="modal__header">
<div class="modal__header__title">
Text
</div>
<div class="modal__header__x">
x
</div>
</div>
</div>
</div>

Answer 2

Yuo can do it like this. See comments in code to get where you are doing mistakes are what was left.
.modal-payment__wrapper {
max-width: 50%;
width: 500px;
height: 200px;
background: white;
font-family: 'Lato', 'sans-serif';
}
.modal__header {
display: flex; // You need this
justify-content: center;
flex-direction: row; // You need this
width: 100%;
height: 50px;
background-color: black;
color: white;
font-size: 16px;
padding-left: 20px;
}
// You will need below css
.modal__header > div{
justify-content: space-around;
width: 50%;
align-self: center;
}
.modal__header__title { // <- this is "text"
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.7em;
padding: 10px;
flex-grow: 0;
flex-shrink: 0; // Spelling mistake
flex-basis: auto;
align-self: auto;
}
.modal__header__x{
color: #fff; // You need this
}
<div class="modal-payment__background">
<div class="modal-payment__wrapper">
<div class="modal__header">
<div class="modal__header__title">
Text
</div>
<div class="modal__header__x"
#click="closeModal">
x
</div>
</div>
<div class="modal__body">
BODY
</div> <!-- Missing /div in your code -->
</div> <!-- Missing /div in your code -->
</div> <!-- Missing /div in your code -->