JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
      <div class="blocks top">one</div>
      <div class="blocks">two</div>
      
</div>

CSS

.blocks {
      line-height: 50px;
      margin: 0 30px 1px;
      text-align: center;
      display: inline-block;
      border: 1px solid grey;   
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 20px;
      width : 200px ;
      float:left;
}

.top {
    color: #fff;
    background: #6c9d31;  
    font-size: 30px;
    font-weight: bold;
    border-bottom: 1px solid #372d22;   
}

JavaScript

$('.blocks').click(function(){
    $('.blocks').removeClass('top');
    $(this).hide().slideDown().addClass('top');
    $(this).parent().append($('.blocks').not(this));
});