For my project, I have set up a parent div with two child divs inside. The first child div contains a list generated using ng-repeat and has a border around it. This div's height adjusts based on the list items. Now, I need the second child div to match the height of the first one so that both borders align perfectly within the parent container. While I know how to achieve this using jQuery, I'm interested in exploring simpler solutions using CSS or AngularJS. Any guidance on this would be greatly appreciated.
Here is an example demonstrating the issue on Plunker: http://plnkr.co/edit/yGI1cJ3y594O89bEZAIH?p=info
<script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
Issue: Equal Height for Child Divs
<div class="row" ng-controller="mainCtrl">
<div class="col-md-6" style="background-color:lightblue; border-style: solid; border-width:1px;">
<div class="col-md-12" ng-repeat="item in items" >
<div>{{item}}</div>
</div>
</div>
<div class="col-md-6" style="background-color:lightred;border-style: solid; border-width:1px;">
<br />
Enter new item to see in the list:
<br />
<input type="text" ng-model="newItem" />
<input type="button" ng-click="addItem()" value="Add" />
</div>
</div>
<script>
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 = "";
}
});
</script>