JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
    <ul>
        <li>first</li>
        <li>second</li>
        <li>last</li>
    </ul>
</div>

<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="td">
                Let us center this and have same width as below
            </div>
        </div>
        <div class="tr">
            <div class="td">
                shorter but same width 
            </div>
        </div>
    </div>
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in dui rhoncus, porttitor nibh ornare, tristique est. Nullam condimentum quam ac metus varius, at fermentum nibh congue. Fusce vel posuere justo, vel vulputate enim. Cras varius libero et felis venenatis ultricies. Vivamus ante est, tempus et aliquet eget, varius id nisi. In a consectetur lacus, vitae lacinia mauris. Nulla pulvinar tellus id laoreet tempus. Integer feugiat quis odio eget ullamcorper.</p>
</div>

CSS

.table{
    display: table;
    margin: 0 auto;
}

.tr{
    display: table-row
}

.td{
    display: table-cell;
    background: red;
}

.nav{
    background: green;
}

.nav ul {
    margin: 0;
}

.nav li{
    display: inline-block;
}

.content{
    background: blue;
}