Unable to take the height of dynamically created container on click event

Question

I have three vertical side by side containers in my html page with id 1234,2345 &3456 respectively.Contents of div with id 1234 is wrapped inside a child div and only 200 characters are visible to user.Upon clicking on a link remaining hidden characters will be visible to user.

All three div's are having boarder and i want the height of all the div's to be equal in all instances.I am able to set the height of 2345 by taking the height of 1234 when the page gets loaded for the first time.However i am unable to set the height when user clicks on 'read more...' or 'show less..' link as height calculated by jquery is not the actual height of the div.

Can anyone help me to get the height of second and third div inline with the first div?

I have created a fiddle to replicate the issue .Jquery & javascript i tried to get the first div's height is given in the fiddle.

https://jsfiddle.net/sonashetty/nca7grfp/24/

$(window).bind("load", function() { 
         $(document).on( 'click', 'a', function () {           
              <!-- Actual height of this div is 802 px but below code is                 giving 67 px-->
              var height = $('#1234').outerHeight( true );
                    console.log(height)
                   $("#2345").height(height + 'px');    
           });

    });

Answer 1

plz check this https://jsfiddle.net/nca7grfp/25/

I had removed the click handler instead added a wrapper with display flex

<div style="display: flex;">

        <div class="col-xs-4....
</div>