title: HTML Button floating right after tab click
body: <p>I am able to get my buttons aligned with my textarea (align to the bottom right) which looks good before I click the tab. Once I click a tab the buttons shift all the way to the right. I suspect it has to do with my display option on tab click. On tab click I am displaying the <code>div inline</code> like this:</p>
  
  <pre><code>document.getElementById(sectionName).style.display = "inline";
  </code></pre>
  
  <p>When I refresh the page again the default display option seems to works fine.</p>
  
  <p>I have tried to use different display options (e,g. <code>block</code>) but they still shift to the right when I click the tabs.</p>
  
  <p>How can I prevent the buttons from shifting on tab click? </p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;div id="verify" class="tabcontent statusAreaDiv"&gt;
    &lt;span class="statusTextAreaLabel"&gt;Status:&lt;/span&gt;
      &lt;textarea class="statusTextArea" readonly&gt;&lt;/textarea&gt;
        &lt;span class="buttonForTextArea"&gt;
          &lt;button class="button" id="btn1"&gt;Verify&lt;/button&gt;
          &lt;button class="button" id="btn2"&gt;Download&lt;/button&gt;
        &lt;/span&gt;
  &lt;/div&gt;
  ...
  ...
  &lt;script&gt;
  function showTab(event, sectionName) {
      var tabContents = document.getElementsByClassName('tabcontent');
      for (var i = 0; i &lt; tabContents.length; i++) { 
          tabContents[i].style.display = 'none';
          console.log("The table contents is: " + tabContents[i]);
      }
      var tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
          console.log("tablinks class is: " + tablinks[i]);
      }
  
      document.getElementById(sectionName).style.display = "inline";
      event.currentTarget.className += " active";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.statusAreaDiv {
      min-width: 490px;
      position: relative;
      display: inline-block;
  }
  
  .statusTextArea{
      position: relative;
      width: 800px;
      border: 2px solid #dddddd;
      border-radius: 10px;
      height: 500px;
      overflow-y: scroll;
      font-size:13px;
      font-family:Verdana, Geneva, sans-serif;
      background-color: light grey;
  }
  
  .statusAreaDiv span.statusTextAreaLabel{
      padding-top: 2em;
      font-family: verdana;
      display: block;
      text-align: left;
      font-size:13px;
  }
  
  .statusAreaDiv span.buttonForTextArea{
      display: block;
      text-align: right;
  }
  
  .button {
    padding: 5px 15px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #368DEE;
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px #999;
  }
  </code></pre>