JSFiddle - React, Tailwind, and code Playground

HTML

<div id="h_divCenter">
        <div id="h_divIETodos" >
            <div id="h_divIIEodoList" class="quadContent">
                <ul id="h_ulIETodoList">
                    <li>itemC 3</li>
                </ul>
            </div>
        </div>
</div>
<input type="button" value="test" id="btnTest" />

CSS

#h_divCenter {
        position:absolute;
		top:0;
		left:20px;
		right:100px;
		bottom:0;
        margin: 5px;
        background: #0FF;
    }
    .quadContent {
        position: absolute;
        top: 41px;
        bottom: 2px;
        padding: 1px 1% 2px 1%;
        width: 98%;

    }
    #h_ulIETodoList,#h_ulIUTodoList,#h_ulUETodoList,#h_ulUUTodoList {
        width: 100%;
        height: 100%;
        list-style-type: none;
        overflow: auto;
    }
	 #h_divIETodos {
	    position: absolute;
	 	margin: 2px;
	 	top: 0;
	 	left: 0;
	 	right: 50%;
	    bottom: 50%;
        color: #DE3C3C;
        border: 1px solid #DE3C3C;
         -webkit-box-shadow: 0px 0px 10px #DE3C3C;
         -moz-box-shadow: 0px 0px 10px #DE3C3C;
         box-shadow: 0px 0px 10px #DE3C3C;
     }

JavaScript

$('#btnTest').on("click", function(){
        $("#h_divIETodos").animate({

            right: "+=20%"
        },500);
    });