JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<div class="outer"><div class="inner"></div></div>

CSS

div.outer {
  width: 5px;
  height: 300px;
  background: transparent;
  position: relative;
  
}
.inner {
	position: absolute;
  left:0;
  top:auto;
  right:0;
  bottom: 0;
  background: green; 
  animation: mymove 3s;
  animation-fill-mode: both;
}

@-webkit-keyframes mymove {
  from {height: 0;}
  to {height: 100%;}
}

@keyframes mymove {
  from {height: 0;}
  to {height: 100%;}
}