JSFiddle - React, Tailwind, and code Playground

HTML

<div class="SliderBannerContainer">
  <div class="SliderBanner">
    <div class="Left">
      <div id="LeftTab">Timeline</div>
      <div class="Timeline">
        <div class="EvaluationPeriod">
          Evaluation Period
        </div>
        <div class="LeftEvaluationPeriod">
          April 1, 2015
        </div>
        <div class="RightEvaluationPeriod">
          September 30, 2015
        </div>
        <div class="SurveyAccepted">
          Surveys Accepted
        </div>
        <div class="SurveyCutoff">
          November 30, 2015
        </div>
        <div class="HorizontalLine">
          <div class="LeftArrow"></div>
          <div class="RightArrow"></div>
        </div>
      </div>
    </div>
    <div class="Right">
      <div id="RightTab">Details</div>
      <div class="Items">
        <div class="RightItem" id="Item1Controller">Survey Background and Focus</div>
        <div class="RightItem" id="Item2Controller">Survey Structure</div>
        <div class="RightItem" id="Item3Controller">Subtopic Evaluation</div>
        <div class="RightItem" id="Item4Controller">Overall Topic Evaluation</div>
        <div class="RightItem" id="Item5Controller">Comments and Feedback</div>
      </div>
    </div>
  </div>
</div>
<div class="Drawer Item1">
<span class="DrawerTitle">Survey Background and Focus</span> Navy Echelon II Command Customer Satisfaction is to be based on: “Services actually provided by the Contractor for mission and business objectives.” When completing this survey, care must be taken to respond based on Navy Marine Corps Intranet (NMCI) services actually provided under the Next Generation Enterprise Network Contract (NGEN). The scope of this survey does not encompass other contracts you may have with HPE.
</div>
<div class="Drawer Item2">
<span class="DrawerTitle">Survey Structure</span> The Command Customer Satisfaction Survey asks you to evaluate HPE on the following four topics: <br>&bull; Warfighter Support Services <br>&bull;...

CSS

.SliderBannerContainer {
  width: 100%;
  height: 156px;
  display: block;
  background: #425C9E;
  padding-top: 4px;
  position: relative;
}

.SliderBanner {
  display: block;
  background: green;
  width: calc(100% - 8px);
  margin-left: 4px;
  height: 152px;
  overflow: hidden;
}

.Left {
  background: url('http://www.navy.mil/management/photodb/photos/160216-M-CB021-038.JPG');
  background-position: 0 30%;
  background-size: 100% auto;
  position: absolute;
  display: inline-block;
  height: 152px;
  width: calc(100% - 8px);
  margin-right: 4px;
  transition: 1s;
  overflow: hidden;
  box-shadow: inset 0 0 90px #000;
}

#LeftTab {
  display: block;
  background: #425C9E;
  height: 40px;
  width: 158px;
  margin-top: 56px;
  margin-left: -60px;
  transform: rotate(-90deg);
  color: white;
  font-size: 26px;
  font-family: verdana;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 3;
}

#LeftTab:hover {
  background: #2B3B66;
}

.Timeline {
  width: calc(100% - 120px);
  margin-top: -70px;
  margin-left: 40px;
  position: relative;
  opacity: 1;
  transition: 1s;
  z-index: 1;
}

.Timeline > .HorizontalLine {
  display: block;
  background: white;
  height: 2px;
  width: calc(100% - 30px);
  margin-left: 15px;
  margin-top: 100px;
  position: absolute;
}

.LeftArrow {
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid white;
  position: absolute;
  margin-top: -9px;
  margin-left: -3px;
}

.RightArrow {
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
  margin-top: -9px;
  right: 0px;
  position: absolute;
  margin-right: -3px;
}

.Timeline > .EvaluationPeriod {
  display: block;
  border: 2px dotted white;
  border-left: 2px solid white;
  border-right: 2px solid white;
  background: rgba(255, 0, 0, .4);
  width: 50%;
  margin-left: 6%;
...

JavaScript

$('#LeftTab').click(function() {
  $('.Left').css({'width': 'calc(100% - 8px)','background-size': '100% auto'});
  $('.Right').css({'width': '60px','background-size': '240px 160px'});
  $('.Timeline').css({'opacity': '1','margin-left': '40px'});
  $('.Item1, .Item2, .Item3, .Item4, .Item5').css({'height': '0'});
  $('#DrawerClose').css({'display': 'none'});
  $('.Items').css({'margin-left': '100px'});
});
$('#RightTab').click(function() {
  $('.Right').css({'width': 'calc(100% - 68px)','background-size': '100% auto'});
  $('.Left').css({'width': '60px','background-size': '160px 160px'});
  $('.Timeline').css({'opacity': '0','margin-left': '90px'});
  $('.Item1, .Item2, .Item3, .Item4, .Item5').css({'height': '0'});
  $('.Items').css({'margin-left': '0'});
  $('#DrawerClose').css({'display': 'none'});
});
// items
$('#Item1Controller').click(function() {
  $('.Item1').css({'height': '200px','overflow-y': 'auto'});
  $('.Item2, .Item3, .Item4, .Item5').css({'height': '0'});
  $('#DrawerClose').css({'display': 'block'});
});
$('#Item2Controller').click(function() {
  $('.Item2').css({'height': '200px','overflow-y': 'auto'});
  $('.Item1, .Item3, .Item4, .Item5').css({'height': '0'});
  $('#DrawerClose').css({'display': 'block'});
});
$('#Item3Controller').click(function() {
  $('.Item3').css({'height': '200px','overflow-y': 'auto'});
  $('.Item1, .Item2, .Item4, .Item5').css({'height': '0'});
  $('#DrawerClose').css({'display': 'block'});
});
$('#Item4Controller').click(function() {
  $('.Item4').css({'height': '200px','overflow-y': 'auto'});
  $('.Item1, .Item2, .Item3, .Item5').css({'height': '0'});
  $('#DrawerClose').css({'display': 'block'});
});
$('#Item5Controller').click(function() {
  $('.Item5').css({'height': '200px','overflow-y': 'auto'});
  $('.Item1, .Item2, .Item3, .Item4').css({'height': '0'});
  $('#DrawerClose').css({'display': 'block'});
});
$('#DrawerClose').click(function() {
  $('.Drawer').css({'height': '0'});
 ...