JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar box" style="">
<div class="sidebar-container js-main-account" style="">
  <h1>
    <div class="float-left">Credit Card</div>
    <div class="float-right">($158.32)</div>
  </h1>
  <ul class="tabs">
    <li><a href="#">All</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
  <ul class="boxed-list">
    <li class="account_history box box-brown">
      <div class="cols clickable" data-click-slide=".js-history-details-209">
        <div class="col-one-third">$100.00</div>
        <div class="col-one-third text-center">
          <a class="text-small js-prevent-default" href="#">Details &raquo;</a>
        </div>
          <div class="col-one-third text-right" title="Mar 05, 2014 07:53:24 AM">3/5/2014</div>
      </div>
    </li>
    <li class="account_history box box-brown">
      <div class="cols clickable" data-click-slide=".js-history-details-210">
        <div class="col-one-third">$138.52</div>
        <div class="col-one-third text-center">
          <a class="text-small js-prevent-default" href="#">Details &raquo;</a>
        </div>
          <div class="col-one-third text-right" title="Mar 05, 2014 07:53:23 AM">3/6/2014</div>
      </div>
    </li>
  </ul>
    <div class="break"></div>
</div>
</div>
    
<div class="js-history-details-209 sidebar-container" style="display:none;">
  <h1>
    <div class="float-left">Withdrawal 1</div>
    <div class="float-right good">$125.00</div>
  </h1>
  <a class="nav-back float-left js-prevent-default" data-slide-back=".js-main-account" href="#">&laquo; Credit Card</a>
  <div class="break"></div>
</div>
    
<div class="js-history-details-210 sidebar-container" style="display:none;">
  <h1>
    <div class="float-left">Withdrawal 2</div>
    <div class="float-right good">$138.00</div>
  </h1>
  <a class="nav-back float-left js-prevent-default" data-slide-back=".js-main-account" href="#">&laquo; Credit Card</a>
  <div class="break"></div>
</div>

SCSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.sidebar {
    width: 40%;
    float: right;
    padding: 0.7em 1em;
}
.box {
    border: 1px solid black;
    margin-bottom: 0.6em;
}
h1 {
    width: 100%;
    float: left;
    font-weight: bold;
    font-size: 1.3em;
    margin-bottom: 0.7em;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
ul.tabs {
    width: 100%;
    float: left;
    li {
        float: left;
        text-align: center;
        font-size: 1.14em;
        min-width: 25%;
        &:first-child {
            margin-left: 0.6em;
        }
    }
}
ul.boxed-list {
    width: 100%;
    float: left;
    padding: 0 0.85em;
    li {
        margin-top: 0.5em;
        padding: 0.4em 0.6em;
    }
}
.cols {
    overflow: hidden;
}
.col-one-third {
    width: 28.57143%;
    float: left;
    margin-right: 7.14286%;
    &:last-child {
        float: right;
        margin-right: 0;
    }
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

.clickable{
    cursor: pointer;
}

.break{
    clear: both;
}

JavaScript

$(document).on("click", ".js-prevent-default", function(e) {
  e.preventDefault();
});

$(document).on("click", "[data-click-slide]", function(e) {
  var $el, $newContents, $parent;
  $newContents = $($(this).data("click-slide"));
  $el = $(this).parents(".sidebar-container");
  $parent = $el.parent();
  $el.hide('slide', {
    direction: 'left'
  });
  $newContents.appendTo($parent).show('slide', {
    direction: 'right'
  });
});

$(document).on("click", "[data-slide-back]", function(e){
  var $el, $newContents, $parent;
  $newContents = $($(this).data("slide-back"));
  $el = $(this).parents(".sidebar-container");
  $parent = $el.parent();
  $el.hide('slide', {
    direction: 'right'
  });
  $newContents.appendTo($parent).show('slide', {
    direction: 'left'
  });
});