JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<div class="tab">
    <div class="logo">Logotype</div>
    <div class="sep"> | </div>
    <div class="phone">phone</div>
    <div class="sep"> | </div>
    <div class="phone">phone</div>
    <div class="sep"> | </div>
    <div class="cart">cart</div>
</div>

CSS

.tab { display:table; width:100%;}
.logo,
.phone,
.cart { display:table-cell; outline:1px solid #f00;}
.sep { display:table-cell; text-align:center;}
.logo { text-align:left; width:80px;}
.phone { text-align:center; width:50px;}
.cart { text-align:right; width:30px;}