JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
    <div class='withborder'></div>
    <div class='noborder'></div>
</div>

CSS

.container{
    font-size:0;
    line-height:0;
    letter-spacing:-1px;
}
.withborder, .noborder{
    vertical-align:top;
    width:200px;
    height:20px;
    background:grey;
    display: inline-block;
    position:relative;
}

.withborder:after{
    content:'';
    display:block;
    width:5%;
    height:100%;
    background:black;
    position:absolute;
    top:0;
    right:-2.5%;
    z-index:999;
}

.withborder:hover:after{
    display:none;
}

.noborder{
    height:30px;
}