Div falling down while toggling the div

Question

I have two inline divs, and one of the inline div I have two divs below each other. JSFiddle

What I am doing on click of #notLoginStudentBtn I am toggling the #notLoginStudentBox but after toggling #notLoginStudentBtn is falling

One more issue I am facing is in inline-blocked divs I want both the divs to have same height i.e same of as that smallest div and longer div will overflow with vertical scroller. I can use max-height but both the divs will grow and shrink dynamically depending on the number of elements

JSFiddle link for the reference: https://jsfiddle.net/govi20/vwc20vsz/

Answer 1

Remove display:inline-block and below css to this class:

.table_sorter_container {
   position: relative;
   float: left;
}

And you need to set height to both div like height: 165px; and also need to set height:165px and max-height:100%

Answer 2

Use :

#notLoginStudentBoxContainer {
  vertical-align: top;
}

$(document).ready(function(){
$("#notLoginStudentBtn").click(function() {
    
    $("#notLoginStudentBox").fadeToggle("slow", function(){
      if( $("#notLoginStudentBtn span").html() == "+"){
        $("#notLoginStudentBtn span").html("-");
      }
      else{
        $("#notLoginStudentBtn span").html("+");
      }
    });
  });
});

#notLoginStudentBoxContainer {
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="testTable bottomBox" id="double-scroll" style="overflow-x: scroll; overflow-y: hidden;">
          
           <div id="table_sorter_container" style="display: inline-block;">
            <table id="table_sorter">
              <tr >
                <th>abc</th>
                <th>abc</th>
                <th>abc</th>
              </tr>
               <tr >
               <td>asasdas</td>
               <td>adasdasd</td>
               <td>adasdasdasd</td>
              </tr>
                              <tr >
               <td>asasdas</td>
               <td>adasdasd</td>
               <td>adasdasdasd</td>
              </tr> 
            </table>
          </div>
          
          <div id="notLoginStudentBoxContainer" style="display: inline-block;">
            <div id="notLoginStudentBtn"> Not Login Student <span>+</span>
                
              </div>
            <div id="notLoginStudentBoxContainer">
              <div id="notLoginStudentBox">
                  
                    
                  
                    
                  
                    
                      <p>
                        <span onclick="showProfile('33')" class="cursor">student12</span>
                      </p>
                    
                  
                    
                      <p>
                        <span onclick="showProfile('34')" class="cursor">student13</span>
                      </p>
                    
                  
                    
                      <p>
                        <span onclick="showProfile('35')" class="cursor">student14</span>
                      </p>
                    
                  
                    
                      <p>
                        <span onclick="showProfile('36')" class="cursor">student15</span>
                      </p>
                    
                  
              </div>
            </div>
            <div>
          </div>
        

      </div>