title: Jquery vertial tabs unknown gap and alignment
body: <p>Been working on this for awhile and seem to not be able to get it working.</p>
  
  <p>First, there is a gap between the tabs and the content and I am unsure how to go about fixing that without making the right side more left.</p>
  
  <p><a href="https://i.stack.imgur.com/mIHX7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mIHX7.png" alt="enter image description here"></a></p>
  
  <p>Second, tabs themselves have an issue when it comes to being attached to the content area. I currently have the tabs <strong>left: -80px;</strong> in order to move them out of the content area. However, doing that seems to have caused an issue depending on how large/small the overall screen size of the users browser is.</p>
  
  <p><a href="https://i.stack.imgur.com/C9HwE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C9HwE.png" alt="enter image description here"></a></p>
  
  <p>If anyone could help me out with this issue then that would be great!</p>
  
  <p>I have made a <a href="https://jsfiddle.net/u6xk7jvt/" rel="nofollow noreferrer">JSFiddle</a> for you to test with.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var tabTitles = ["First Tab", "Second Tab", "Third Tab", "Fourth Tab", "Fifth Tab", "Sixth Tab"];
  
  $(".tabHeader").click(function() {
    $(".tabHeader").removeClass("active");
    var position = $(this).position();
    var top = position.top;
    $(".active").css("top", top);
    $(this).addClass("active");
    var text = $(this).text().trim();
    switch (text) {
      case "Tab 1":
        $(".tabTitle").text(tabTitles[0]);
        break;
      case 'Tab 2':
        $(".tabTitle").text(tabTitles[1]);
        break;
      case 'Tab 3':
        console.log('yo');
        //$('.textBody').html('TEST!');
        $(".textBody").load("https://raw.githubusercontent.com/jiahaog/ajax-test-page/master/index.html", function(responseTxt, statusTxt, xhr) {
  
        });
        $(".tabTitle").text(tabTitles[2]);
        break;
      case 'Tab 4':
        $(".tabTitle").text(tabTitles[3]);
        break;
      case 'Tab 5':
        $(".tabTitle").text(tabTitles[4]);
        break;
      case 'Tab 6':
        $(".tabTitle").text(tabTitles[5]);
        break;
      default:
        $(".tabTitle").text("Select A TAB");
        break;
  
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
  }
  
  .card {
    display: flex;
    flex-direction: row;
    background-color: white;
    margin: 0 auto;
    margin-top: 10px;
    width: 85%;
    height: 100%;
    box-shadow: 1px 2px 6px #d3d3d3;
    border-radius: 4px;
  }
  
  .tabHeader {
    width: 80px;
    height: 50px;
    background-color: #47bc8b;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  
  .verticalTabs {
    position: relative;
    left: -80px;
    right: 0px;
    display: table-cell;
  }
  
  .active {
    position: relative;
    z-index: 50;
    width: 80px;
    height: 50px;
    background-color: #259162;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  
  .tabText {
    position: absolute;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    margin-top: 16px;
    margin-left: 23px;
  }
  
  .textHolder {
    margin: 10px;
    text-align: justify;
    overflow: scroll;
    overflow-x: hidden;
    width: 100%;
  }
  
  .tabTitle {
    font-size: 20px;
    font-weight: 600;
    padding: 0 0 20px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tab-wrapper"&gt;
  
    &lt;div class="card"&gt;
      &lt;div class="verticalTabs"&gt;
        &lt;div class="tabHeader active"&gt;
          &lt;div class="tabText"&gt;Tab 1&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="tabHeader"&gt;
          &lt;div class="tabText"&gt;Tab 2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="tabHeader"&gt;
          &lt;div class="tabText"&gt;Tab 3&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="tabHeader"&gt;
          &lt;div class="tabText"&gt;Tab 4&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="tabHeader"&gt;
          &lt;div class="tabText"&gt;Tab 5&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="tabHeader"&gt;
          &lt;div class="tabText"&gt;Tab 6&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="textHolder"&gt;
        &lt;div class="tabTitle"&gt;First Tab&lt;/div&gt;
        &lt;div class="textBody"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>