JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">foo
    <div id="list1" class="link-list">bar
        <div id="list2" class="link-list">foo

CSS

/* Properties that both side lists have in common */
div.link-list {
        width:10.2em;
        position:absolute;
        top:0;
        font-size:100%;
        padding-left:1%;
        padding-right:1%;
        margin-left:0;
        margin-right:0;
}
/* we leave some place on the side using the margin-* properties */
#main {
        margin-left:15%;
        margin-right:15%;
        padding-left:10%;
        padding-right:10%;
}
/* and then we put each list on its place */
#list1 {
        left:0;
}
#list2 {
        right:0;
}