JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child small-shift"></div>
</div>
<br/>
<div class="parent">
    <div class="child full-shift"></div>
</div>

CSS

.parent {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: black;
}
.child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
}
.small-shift {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.full-shift {
    -webkit-transform: translateX(300px) translateX(-100%);
    transform: translateX(300px) translateX(-100%);
}