I'm currently facing an issue with aligning two side-by-side divs to the same height when the content is generated using an ng-repeat function. Using flexbox is causing responsiveness issues, and I'm unsure of the appropriate time to call a jQuery function as the views are nested and the page doesn't fully load when new HTML is displayed. I've attempted using ng-repeat-start and end without success.
Ideally, I'd like the right div to match the height of the left div once the content has loaded. Any assistance with this problem would be greatly appreciated.
Cheers
EDIT - Code Included
<div class="row">
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing rottnestGreen">
<div ng-repeat="bh in bikeHire" class="row">
<p class="col-xs-6">{{bh.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="bikeHire[$index].quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(bh.type, bikeHire[$index].quantity, bh.price)"></select>
<p class="col-xs-3 blueText">{{bh.price | currency}}</p>
</div>
</div>
</div>
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing np rottnestGreen">
<div ng-repeat="sf in sAndF" class="row">
<p class="col-xs-6">{{sf.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="sf.quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(sf.type, sf.quantity, sf.price)"></select>
<p class="blueText col-xs-3">{{sf.price | currency}}</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>