JSFiddle - React, Tailwind, and code Playground
HTML
<div class="body">
<div class="left"></div>
<div class="right">
<div class="third">
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
<div>
</div>
</div>
CSS
.body{
width:1200px;
height:200px;
overflow:auto;
}
.left{
height:200px;
width:900px;
background-color:red;
float:left;
position:absolute;
}
.right{
dir:rtl;
height:200px;
width:inherit;
background-color:blue;
float:left;
position:absolute;
z-index:-1;
}
.third{
float:right;
width:200px;
}