Q:

Making columns out of spans

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.

A:

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>

