JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
  </head>
  <body>
    <div id="up" class="button">-100px</div>
    <div id="down" class="button">+100px</div>
    <div id="cont">
      <div id="top">top</div>
      <div id="mtop">margin-top</div>
    </div>
  </body>
</html>

CSS

#cont{
    width: 500px;
    height: 500px;
    border: 2px solid #000;
    margin-top: 60px;
    clear: both;
  }
.button{
    width: 100px;
    height: 20px;
    text-align: center;
    cursor: pointer;
    border: 2px solid #000;
    float: left;
  }
#top{
    width: 100px;
    height: 100px;
    background: #F00;
    top: 0;
    left: 0;
    position: relative;
    border: 2px solid #000;
    float: left;
}
#mtop{
    width: 100px;
    height: 100px;
    background: #0F0;
    left: 50px;
    top: 0;
    margin-top: 0;
    position: relative;
    border: 2px solid #000;
    float: left;
}

JavaScript

$(function () {
    $('#down').click(function () {
      $('#top').animate({top: '+=' + 100}, 500);
      $('#mtop').animate({'margin-top': '+=' + 100}, 500);
    });
    $('#up').click(function () {
      $('#top').animate({top: '-=' + 100}, 500);
      $('#mtop').animate({'margin-top': '-=' + 100}, 500);
    });
});