title: Angularjs - How to have same height for the child divs when one child div's size is increased dynamically with ng-repeat
body: <p>I have created a parent div. In this parent div, I have added 2 child divs. First child div contains list, which is created using ng-repeat. The first div also has border around it. This first div grows and shrinks based on the list of items. I want the second div to have the same height as the first div so that both the borders are aligned in the parent (i.e., with same height).  I know how to do this using jquery. However, I would like to know simpler approaches to this problem either using CSS or Angularjs. Thanks for helping me.</p>
  
  <p>Example of the issue in Plunker : <a href="http://plnkr.co/edit/yGI1cJ3y594O89bEZAIH?p=info" rel="nofollow">http://plnkr.co/edit/yGI1cJ3y594O89bEZAIH?p=info</a></p>
  
  <p>
  </p>
  
  <p>
    
      
      </p>
  
  <pre><code>&lt;script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>
      <h1>Issue: Same height for both child divs</h1></p>
  
  <pre><code>&lt;div class="row" ng-controller="mainCtrl"&gt;
    &lt;div class="col-md-6" style="background-color:lightblue; border-style: solid; border-width:1px;"&gt;
      &lt;div class="col-md-12" ng-repeat="item in items" &gt;
        &lt;div&gt;{{item}}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6" style="background-color:lightred;border-style: solid; border-width:1px;"&gt;
      &lt;br /&gt;
      Enter new item to see in the list:
      &lt;br /&gt;
      &lt;input type="text" ng-model="newItem" /&gt; 
      &lt;input type="button" ng-click="addItem()" value="Add" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
  var app = angular.module("mainApp", []);
  app.controller("mainCtrl", function ($scope) {
    $scope.items = [1, 2, 3, 4, 5, 6, ];
    $scope.newItem = "";
  
    $scope.addItem = function() {
      $scope.items.push($scope.newItem);
      $scope.newItem = "";
    }
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>