JSFiddle - React, Tailwind, and code Playground

by DustyWhite

HTML

<main>
  <section class=pg_2wrapping_paper>
    <div class="pg_2right-wrapper">
    I am Grrot! I mean I am Groot! I mean I am blue! Hear me roar! I mean watch me be "BLUE"!!
      <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 to 500 px wide. No more.
    </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>
      <p>
  Hello! I am what's left over!
  </p>
  </section>
</main>

CSS

.pg_2wrapping_paper {
  background-color: aliceblue;
}

.pg_2left {
  float: left;
  max-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;
}