JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner1">
       Y
    </div><div class="inner2">
        X
    </div>    
</div>

CSS

.outer {
    width: 210px;
    border: 1px solid red;
    position:relative;
    white-space: nowrap;
}

.inner1 {
    width: 200px;
    border: 1px solid orange;
    display: inline-block;
}
.inner2 {
    width: 50px;
    position:relative;
    left: -50px;
    display: inline-block;
    border: 1px solid lightblue;
}

* { box-sizing: border-box; }