Text aligns weirdly with justify-content: space-evenly; - css

Question

So I have a list something like this:
.ul-employee {
display: flex;
flex-direction: column;
text-align: left;
height: 100%;
justify-content: space-around;
}
.li-employee {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 400px;
}
<ul class="ul-employee">
<li class="li-employee">
<h3>Employee Name</h3>
<p>Salary</p>
<p>Position</p>
</li>
<li *ngFor="let employee of employees" class="li-employee">
<h3>{{ employee.name }}</h3>
<p>${{ employee.salary }} / hour</p>
<p>{{ positions[employee.position] }}</p>
</li>
</ul>
The result is this
The list is in a container with width of 400px, the list takes 100% of the width space and so does the list items. I tried doing text-align: left; but that doesn't seem to work.
How do I make it so it's aligned more like:
Employee Name Salary Position
Employee Name Salary Position
Employee Name Salary Position
Employee Name Salary Position
instead of one more to the right and another more to the left?

Answer 1

You need 2-dimension layout. Flex is for 1-Dimension layout.
You need display: grid;

Answer 2

display:table; seems more appropriate than display:flex here if that's not a real table ... :
.ul-employee {
display: table;
text-align: left;
height: 100%;
}
.li-employee {
display: table-row;
width: 400px;
}
.li-employee > * {
display:table-cell;
border:solid;
padding:0.25em;
<ul class="ul-employee">
<li class="li-employee">
<h3>Employee Name</h3>
<p>Salary</p>
<p>Position</p>
</li>
<li *ngFor="let employee of employees" class="li-employee">
<h3>{{ employee.name }}</h3>
<p>${{ employee.salary }} / hour</p>
<p>{{ positions[employee.position] }}</p>
</li>
</ul>