JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="odd-boxes">
    
    <div>
    <span class="surname-entry">ABCDEFGH<span>,</span></span>
    <span class="name-entry">&nbsp;PQRSTU</span>
    <span class="number-entry alignright" style="margin-right:20px">K</span>    
    </div>
</div>
<div class="even-boxes">
    
    <div>
    <span class="surname-entry">ABCDEFGH<span>,</span></span>
    <span class="name-entry">&nbsp;PQRSTU</span>
    <span class="number-entry alignright" style="margin-right:20px">K</span>
    <div class="another-entry">[1234567890101]</div>
    </div>
</div>
</body>

CSS

.alignleft {
	float: left;    
}
.alignright {
	float: right;    
}
.even-boxes,
.odd-boxes {
    height : 52px;
    width : 430px;
    padding-left : 20px;
    display : table-cell;
    vertical-align : middle;
}

.odd-boxes {
    background-color:#FFCCCC;
}

.even-boxes {
    background-color:#CCEBFF;
}

.surname-entry {
    font-size: 25px;
    font-family:"Verdana";
}

.name-entry {
    font-size: 18px;
    font-family:"Verdana";
}

.another-entry {
    font-size: 14px;
    font-family:"Verdana";
}

.number-entry {
    font-size: 32px;
    font-family:"Verdana";
}