JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red" >
        <p>text</p>
</div>

CSS

p {
    margin: 0;
    padding: 0;
}
.red {
    width: 100%;
    padding: 0 calc(50% - 100px);
    box-sizing: border-box;
    background: red linear-gradient(0deg, green, green) 50% 50% no-repeat;
    background-size: 200px 100%;
}