JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b11311">
    <div class="a"></div>
    <div class="c">
        <div class="d" style="bottom: 50%"></div>
    </div>
</div>

CSS

.b11311
{
    position: relative;
    margin: 10px;
    padding: 5px;
    height: 200px;
    border: 1px dotted red;
    float: left;
}

.a
{
    float: left;
    width: 50px;
    height: 100%;
    margin-right: 5px;
    border: 1px solid #999;
    background-color: #CCC;
}

.c
{
    position: relative;
    float: left;
    height: 100%;
    width: 20px;
    border: 1px dotted blue;
}

.d
{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #C94;
}

JavaScript

$(function()
  {
      var css_bottom_value = $('.d').css('bottom');
      var px_expected = $('.d').position().top + $('.d').height();
      var percent_expected = (px_expected / $('.c').height() * 100);
 
      console.log("$('.d').css('bottom'): " + css_bottom_value);
      console.log("$('.d')[0].style.bottom: " + $('.d')[0].style.bottom);
      console.log('webkit expected: ' + percent_expected + '%');
      console.log('firefox expected: ' + px_expected + 'px');     
      
      // The orange box should not move when this fires
      // it should be rendered about half way down the blue box
      setTimeout(function()
      {
            $('.d').animate({'bottom': css_bottom_value}, 1000);
            console.log('Test complete');
      }, 1000);
  });