JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<div class="left-column">
    <div class="fixed-inner-box">
    </div>
</div>
<div class="right-column">
</div>

CSS

.left-column, .right-column {
    width: 20%;
    box-sizing: border-box;
    float: right;
    position: relative;
    display:inline-block;
    background: blue;
    direction: rtl;
    height:1000px;
}

.right-column {
    width: 80%;
    background:#b54930
}

.fixed-inner-box{
  width: 100%;
  border:1px solid black;
  height:100px;
  box-sizing:border-box;
  z-index:5;
  background:red;
  position:fixed;
  left: 29.4%;
  top: 2%;
  transform: translateX(50%);
  margin-right: 1%;
}