JSFiddle - React, Tailwind, and code Playground

HTML

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>How to right-align "Contact" in new display table setup?</p>
<p>Old flexbox version: <a href="http://jsfiddle.net/vqDK9/">http://jsfiddle.net/vqDK9/</a></p>

CSS

.main { display: table; width:100% }
.a, .b, .c { background: #efefef; border: 1px solid #999; display: table-cell; }
.b { text-align: center; width: 100%; }
.c { text-align: right;}