JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p contentEditable="true">
    Edit me! Unfortunally I can be overflowed... :(
  </p>
</div>

CSS

div
{
  width: 50vw;
  height: 50vh;
  
  margin: 10px auto;
  
  background-color: gray;
}

p
{
  position: absolute;
  
  left: 50%;
  transform: translateX(-50%);
  
  width: 25%;
  
  background-color: brown;
  
  text-align: center;
  
  white-space: nowrap;
  
  overflow-x: hidden;
}

p *
{
  display: none;
}