JSFiddle - React, Tailwind, and code Playground

by Andrew Lyndem

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis culpa nobis dolorem voluptates ut odio numquam officia provident quos labore, natus sint doloribus ducimus similique aspernatur, enim, voluptatibus vel facere!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, adipisci? Quidem laboriosam sunt, qui non ea placeat laborum deserunt consequatur consequuntur vel, officiis magnam. Vitae officiis, quidem doloribus nesciunt voluptatem!
</p>
<span>Right side text</span>

CSS

html, body{width: 100%; height: 100%; margin: 0; padding: 0;}
p {
  width: 0;
  height:0;
  opacity: 0;
  transition: width 2s, opacity 3.5s;
  float:left;
  margin: 0;
}

JavaScript

var p = document.getElementsByTagName("p")[0];

p.style.width = "50%";
p.style.height = "auto";
p.style.opacity = 1;