JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    black
</div>

CSS

div {
    font-family: Helvetica, sans-serif;
    font-variant: small-caps;
    font-size: 500%;
    border: 1px solid #000;
    padding: 1px 1px 1px 15px ;
    display: inline-block;
}

div:after {
    content: 'white';
    display: inline-block;
    background: #000;
    padding: 0 15px 0 5px;
    margin-left: -20px;
    color: #fff;
}