JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <div class="cincuenta middle">lorem</div>
	<div class="cincuenta title">ipsum</div>
</div>

CSS

#nav { 
    display: table; 
     width:50%;
}
.title { 
    float: left;  
    width: 100%; 
    display:table-cell;  
    background-color: blue; 
}
.middle {  
    display:table-cell;
    vertical-align: middle;
    background-color: red; 
}
.cincuenta {
       
    text-align: center;
     min-height: 50px;
}