JSFiddle - React, Tailwind, and code Playground

HTML

<div>Test the flow of this.</div>
<div class="test"></div>
<div id="square"></div>
<div>Keep testing the flow of this.</div>
<div style="clear: left">More testing</div>

CSS

#square {
    width: 10px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    float: left;
    position: relative;
    top: 0;
    left: 0;
    background: blue;
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    width: 110px;
    height: 110px;
    top: -50px; /* inital top- (intial top-height)/2) */
    left: -50px; /* inital left- (intial left-width)/2) */
    margin-right: -50px;
    margin-bottom: -50px;
}
.test {
    float: left;
    width: 30px;
    height: 10px;
    border: 1px solid red;
}