JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="children">
        <p><span>Firstname</span></p>
        <p><span>Tom</span></p>     
        <p><span>SomedudewithsuperlongFirstname</span></p>     
    </div>
    <div class="children">
        <p><span>Lastname</span></p>
        <p><span>Jones</span></p>
        <p><span>SomedudewithsuperlongLastname</span></p>   
    </div>  
</div>

CSS

#container{
    display: block;
    border: 1px dashed #ccc;    
    width: 500px;
    margin: 0 auto;
}
.children{
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
.children > p > span{
    vertical-align: middle;
}