JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inverted-bar">
  <div class="outer">Lorem ipsum dolor sit amet</div>
  <div class="inner">Lorem ipsum dolor sit amet</div>
</div>

CSS

.inverted-bar {
  position: relative;
  width: 300px;
}

.inverted-bar div {
  padding: 10px 0;
  text-indent: 10px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
}

.inverted-bar .outer {
  background-color: aqua;
  color: red;
  width: 100%;
}

.inverted-bar .inner {
  background-color: red;
  color: aqua;
  width: 30%;
}