JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Original layout</h2>
<div class="wrapper">
    <ul class="menu">
        <li><a href="#">menu</a></li>
    </ul>
    <div class="content">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit
        </div>
    </div>  
</div>
<br>
<h2>New layout after adding the selector "table"</h2>
<div class="wrapper table">
    <ul class="menu">
        <li><a href="#">menu</a></li>
    </ul>
    <div class="content">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit
        </div>
    </div>  
</div>

<br>
<h2>Need help with this. (bring menu section to the right after adding the selector "right")</h2>
<div class="wrapper table">
    <ul class="menu right">
        <li><a href="#">menu</a></li>
    </ul>
    <div class="content">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit
        </div>
    </div>  
</div>

CSS

body { margin:10px auto;width:80% }
.wrapper {
    margin:10px;
    width:100%;
}
ul.menu {
    background:orange;padding:10px
}
.content {
    background:#ddd;padding:10px
}


/* table layout */
.wrapper.table {
    display:table;table-layout:fixed;
}
.table ul.menu,
.table .content {
    display:table-cell;vertical-align:top;float:none
}
.table ul.menu {
    width:180px;
}



h2 { font-weight:bold}