JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="children"></div>
</div>

CSS

#parent {
    width: 200px;
    height: 200px;
    background: #ff0;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}

JavaScript

parent = document.getElementById('parent');
children = document.getElementById('children');

parent_height = parent.clientHeight;
children_translate = parent_height * 50/100;
children.style.webkitTransform = "translateY("+children_translate+"px)";