JSFiddle - React, Tailwind, and code Playground

HTML

<div class="review-type-wrapper-v">
        <div class="review-type-inner" style="height:82%">
            <div></div>
        </div>
    </div>

CSS

@-webkit-keyframes lineV {
        from {
            height: 0;
        }
        to {
            height: 100%;
        }
    }
    
    @keyframes lineV {
        from {
            height: 0;
        }
        to {
            height: 100%;
        }
    }
    
    .review-type-wrapper-v,
    .review-type-wrapper-h{
        border-radius:3px;
        border:1px solid #333;
        overflow: hidden;
        .review-type-inner{
            position: absolute;
            > div{
                background-color: #333;
                //position: absolute;
                left: 0;
                height: 100%;
                //width:100%;
            } 
        }
    }
    
    
    .review-type-wrapper-v{
        position: relative;
        width: 14px;
        height: 60px;
        .review-type-inner{
            bottom: 0;
            width: 100%;
            height: 100%;
            > div{
                -webkit-animation: lineV 3s linear;
                animation: lineV 3s linear;
            }
        }
    }