Making columns out of spans - css

Question

I recive {patients} and place it into a div:
<div className="patients">
{patients}
</div>
It contains Name and Surname, each row in two spans:
(Dev Tools)
(Current state)
How can style those spans into columns (table-like)?
(Expexted result)
---EDIT---
Content of {patients} changes. It's a result of searching, so different names come, sometimes more, sometimes less. I can't apply a style to them separatly.
See the code.

Answer 1

Flexbox is perfect for this kind of layout. Create the flexbox layout in each row by giving the .patient wrapper display: flex;:
.patient {
display: flex;
justify-content: space-between;
}
The justify-content: space-between rule puts the spans on the left and right ends of the available space, one of my favorite things flexbox can do.
.patients {
border: 1px solid black;
max-width: 250px;
}
.patient {
display: flex;
justify-content: space-between;
border-top: 1px solid black;
}
.patient span {
padding: 0 20px; // gives a little space around each span
}
.patient:first-child {
border-top: none;
}
<div class="patients">
<div class="patient">
<span>Eri</span>
<span>Car</span>
</div>
<div class="patient">
<span>Dude</span>
<span>Ok</span>
</div>
<div class="patient">
<span>Nice</span>
<span>One</span>
</div>
</div>

Answer 2

<div class="patients">
<div class="patient">
<span>Eric</span>
<span>Car</span>
<span>Car</span>
</div>
<div class="patient">
<span>Eric</span>
<span>Car</span>
<span>Car</span>
</div>
<div class="patient">
<span>Eric</span>
<span>Car</span>
<span>Car</span>
</div>
<div class="patient">
<span>Eric</span>
<span>Car</span>
<span>Car</span>
</div>
</div>
CSS
----
.patients {
border: 1px solid black;
display: table;
width: 100%;
border-bottom: none;
}
.patient {
display: table-row;
}
.patient > span {
display: table-cell;
border-bottom: 1px solid black;
}

Answer 3

You can use display with table/table-row/table-cell or use display block with a fix with or make each row a flexbox with a fixed width or some other solution. There are many ways to achieve that.