JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c">
   <div class="p1">
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </div>
   <div class="p2">
     bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   </div>
</div>

CSS

.c {
  border: 1px solid black;
  width: 100px;
  background: lightgreen;
}

.p1,.p2 {
  word-break: break-all;
  display: inline;
}

.p1 {
  background: yellow;
  padding: 2px 0 2px 0;
}