Dynamic Height's changes based on parent and child

by Rayudu Ikkurthi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<div class="parent">
  <div class="left">
      Left Content Goes Here
  </div>
  
  <div class="right">
      Right Content will increse based on content
      <p>
        But left ew have one line
      </p>
      <a href="javascript:void(0)" class="Dynamic">Increase text</a>
      <div class="hiddenContent">
          <p>
            Increased contentet.........
          </p>
           <p>
            Increased contentet.........
          </p>
           <p>
            Increased contentet.........
          </p>
          <button class="closeContent">
            Cancel
          </button>
      </div>
  </div>
  
  <div class="clear">
  
  </div>
</div>

<div class="parent">
  <div class="left">
      Left Content Goes Here
  </div>
  
  <div class="right">
      Right Content will increse based on content
      <p>
        But left ew have one line
      </p>
      <a href="javascript:void(0)" class="Dynamic">Increase text</a>
      <div class="hiddenContent">
          <p>
            Increased contentet.........
          </p>
           <p>
            Increased contentet.........
          </p>
           <p>
            Increased contentet.........
          </p>
          <button class="closeContent">
            Cancel
          </button>
      </div>
  </div>
  
  <div class="clear">
  
  </div>
</div>

CSS

.parent{
  padding:10px;
  border:1px solid gray;
  margin:0 auto;
  width:100%;
  margin-bottom:20px;
}
.left{float:left;width:30%;background:lightgray;border-right:1px solid black;}
.right{float:left;width:69%;}
.clear{clear:both;}

.hiddenContent{display:none;}

JavaScript

$(document).ready(function(){
	$('.parent').each(function(){
  	var height = $(this).height();
    $(this).find('.left').height(height);
  });

});

$('.Dynamic').each(function(){
	$(this).click(function(){
  	$(this).next('.hiddenContent').show();
   OpenHeight = $(this).parents('.parent').height();
   $(this).parents('.parent').find('.left').height(OpenHeight);
	console.log('Open Height:' + OpenHeight);
  });
	//$('.hiddenContent').show();
 
});
$('.closeContent').each(function(){
	$(this).click(function(){
  	$(this).parent('.hiddenContent').hide();
    
     CloseHeight = $(this).parents('.right').height();
     $(this).parents('.parent').find('.left').height(CloseHeight);
	console.log('Close Height:' + CloseHeight);
  })
	//$('.hiddenContent').hide();
  
});