JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<div class="inner">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ea accusantium distinctio ut ex accusamus adipisci culpa laborum vero reprehenderit pariatur, repellat dolore illo labore sunt quam, dolor facilis quisquam, ipsam repellendus quia numquam ad. Accusamus qui alias voluptatibus sint eligendi consectetur recusandae aperiam, odit consequatur accusantium, vel inventore assumenda earum quibusdam modi sed id voluptate in ipsam ex voluptatem molestias aliquid, tempora et! Culpa commodi doloribus dicta fuga voluptatum perferendis unde deserunt autem cum asperiores mollitia laudantium error, temporibus similique amet nulla enim fugiat inventore. Exercitationem dolores quasi minus libero omnis similique at possimus ad, temporibus quo molestias repellat. Excepturi porro fuga, sed libero labore voluptate sapiente assumenda corporis corrupti, tempora repudiandae eos quasi autem quas laboriosam eligendi nesciunt dolore odio hic pariatur exercitationem vitae reiciendis inventore? Aut mollitia quam necessitatibus, neque perferendis quod tenetur repudiandae quidem temporibus velit culpa ipsa vero cupiditate recusandae voluptas nam? In necessitatibus reprehenderit officia odio explicabo, vitae placeat quibusdam harum tempora modi quaerat expedita quasi veniam rerum voluptatibus perspiciatis! Aliquid, nobis. Natus nam qui asperiores dicta mollitia deserunt eveniet ad perferendis corrupti, maxime dolorem quo omnis labore eos laboriosam laborum quae! Quae vero provident ipsa voluptatibus quasi obcaecati optio nulla error nostrum aliquid illo doloremque odio excepturi, dolores velit voluptatem eum delectus recusandae corporis voluptates veritatis, omnis qui. Non, animi veniam vel eaque ad tempora tempore ducimus asperiores, culpa velit numquam dignissimos illum rem quo voluptatem saepe debitis dicta consequuntur? Dolor tenetur excepturi alias. Maxime ratione corrupti, nostrum modi fugit hic expedita excepturi...
SCSS
html {
font: 16px;
}
.wrapper {
display: flex;
justify-content: center;
.inner {
flex: 1;
padding: 10px 20px;
background: hotpink;
p {
font-size: 16px;
}
}
}
@media (min-width: 600px) {
.wrapper {
.inner {
flex: 0 1 800px;
background: goldenrod;
p {
font-size: 18px;
}
}
}
}