JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="outer">
    <div id="inner">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quaerat vel asperiores eos nesciunt accusamus nihil nulla vero quia quasi magni perspiciatis sit nisi odit deleniti at, fugiat totam consequatur temporibus quo! Alias enim, architecto recusandae voluptatum impedit repudiandae rem ipsum, ipsam, minima ullam vitae mollitia et reprehenderit molestiae deleniti?</div>
  </div>
</body>
</html>

CSS

*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#outer {
  position: relative;
  overflow-x: hidden;
  /* overflow-x: clip; */
}

#inner {
  position: absolute;
  background-color: #FF9671;
  padding: 1rem;
  transform: translateX(10rem);
}