JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span>ABC DEF GHI JKL MNO PAR STU VWX YZ</span>
</div>

CSS

div {
  color: red; width: 250px;
}
div::first-line {
  color: green;
  --padd: 0 30px;
}
span {
  border: 3px solid;
  padding: var(--padd);
  line-height: 30px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}