JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <article>
      this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this
      is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,
      this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this
      is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,
      this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this
      is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a
      test,this is a test,this is a test,

    </article>
  </div>

CSS

#box {
 container: box/size;
 height: 200px;
}

@container box (height > 50px) {
 article {
   background: skyblue;
 }
}

@container box (width > 50px) {
 article {
   color: blue;
 }
}