JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 <div class="flat-form">
            <ul class="tabs">
                <li>
                    <a  href="#tab1" class="active" >Tab1 </a>
                </li>
                <li>
                    <a  href="#tab2" >Tab2</a>
                </li>
            </ul>
            <div id="tab1"  class="form-action show">
                Hello1
            </div>
             <div id="tab2"  class="form-action hide">
                Hello2
            </div>
        </div>

CSS

/*//////////////  Tabed Content //////////////////// */

.flat-form {
  /* background: #cd6a60; */ /* Removed this line */ 
  color:#dfdfdf;
  width: 100%;
  /* padding-bottom:20px; */ /* Removed this line */
  position: relative;
    overflow:hidden; /* added this line */
  font-family: Verdana;
}
.tabs {
  background: #c0392b;
  /* height: 40px; */ /* Removed this line */
  margin: 0;
  padding: 0;
  list-style-type: none;
  /* width: 100%; */ /* Removed this line */
  width: 20%;  /* added this line, change this to whatever value you want the width to be*/
  position: relative;
  display: inline-block; /* changed block to inline-block */
  /* margin-bottom: 20px; */ /* Removed this line */
  float: left; /* Added this line */
}

.tabs li {
  display:block; /* changed inlin-block to block */
  white-space:nowrap;
  /* float: left; */ /* Removed this line */
  margin: 0;
  padding: 0;
}
.tabs a {
  background: #c0392b;
  display: block;
  /* float: left; */ /* Removed this line */
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 12px 22px 12px 22px;
  /*border-right: 1px solid @tab-border;*/
    text-align:right; /* added this line */
 
}
.tabs li:last-child a {
  border-right: none;
  /* width: 174px; */ /* Removed this line */
  /* padding-left: 0; */  /* Removed this line */
  /* padding-right: 0; */  /* Removed this line */
  /* text-align: center; */ /* Removed this line */
}
.tabs a.active {
  background:  #cd6a60;
  border-right: none;
  -webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear;
  text-decoration: underline;
}
.form-action {
  padding: 0 20px;
  position: relative;
  float:left; /* added this line */
  background: #cd6a60; /* added this line */
  padding:15px; /* added this line */
  width:80%; /* added this line */
  min-height:100px;  /* added this line */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox,...

JavaScript

(function ($) {
        // constants
        var SHOW_CLASS = 'show',
      HIDE_CLASS = 'hide',
      ACTIVE_CLASS = 'active';

        $('.tabs').on('click', 'li a', function (e) {
            e.preventDefault();
            var $tab = $(this),
         href = $tab.attr('href');

            $('.active').removeClass(ACTIVE_CLASS);
            $tab.addClass(ACTIVE_CLASS);

            $('.show')
        .removeClass(SHOW_CLASS)
        .addClass(HIDE_CLASS)
        .hide();

            $(href)
        .removeClass(HIDE_CLASS)
        .addClass(SHOW_CLASS)
        .hide()
        .fadeIn(0); // changed from 550 to 0 since there was a jump while switching tabs. Try adding back 550 and see the jumping, if you dont want this to happen leave it as 0 itslef, else change to 550.
        });
    })(jQuery);