JSFiddle - React, Tailwind, and code Playground

by cssGuy

HTML

<div id="container">
<p id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit corporis est esse provident assumenda consequatur vel atque minima id veritatis! Totam iure omnis laudantium provident dolorum blanditiis modi voluptatibus nihil.</p>
<p id="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore debitis blanditiis iure aperiam quam vero esse perferendis doloremque eos natus nemo quos mollitia ratione qui laboriosam itaque animi tempora.</p>
</div>

CSS

/* DIFFERENCE BETWEEN WIDTH:AUTO & WIDTH:100% */
* {margin: 0;padding: 0;}
#container {
    overflow-y: hidden;
    overflow-x: visible; /*COMPUTED VALUE BECOMES *AUTO* IF PARED WITH OVERFLOW-Y:HIDDEN SO BE AWARE OF THIS*/
    width: 500px;
    margin: auto;
    background-color: green;
}
#one {
    width: auto;
    padding:10px;
    margin: 20px;
    border:10px solid gray;
}
#two {
    
    width: 100%;
    padding:10px;
    margin: 20px;
    border:10px solid gray;
}