JSFiddle - React, Tailwind, and code Playground

by DustyWhite

HTML

<main>
<section class=pg_2wrapping_paper>
<div class="pg_2right-wrapper">
    <div class="pg_2right">I'm flexible! I'm flexible! I'm flexible! I'm flexible! I'm flexible! I'm flexible! I'm flexible! I'm flexible!    
    <div style="width: 100%; background-color: #a0a0a0;">I'm an element that takes 100% of my current area. I'm an element that takes 100% of my current area. I'm an element that takes 100% of my current area. I'm an element that takes 100% of my current area.             
     </div>        
    </div>
</div>
<div class="pg_2left">
    I take up 200 px wide. No more, no less.
</div>
<div>
<p class="pg_2red">
123 123 123 1234 -- 123 123 123 1234 -- 123 123 123 1234 -- 123 123 123 1234 -- 123 123 123 1234 -- 123 123 123 1234 -- 
</p>
</div>
</section>
</main>

CSS

.pg_2wrapping_paper {
    background-color: aliceblue;
}

.pg_2left {
    float: left;
    width: 200px;
    margin-left: -100%;
        background-color: lightsalmon;
}
.pg_2right-wrapper {
    float: left;
    width: 100%;
        background-color: blue;
}
.pg_2right {
     margin-left: 200px; 
             background-color: yellow;
}
.pg_2red {
  background-color: tomato;
}