如何根据每个div中的内容自动调整div？

Question

我正在尝试使用div（每个div具有不同数量的内容）创建多个盒子，并且每个2 div应该排成一行。 但是问题是，如果一个div具有更多的内容，那么它会变得比另一个更大。这样会在另一个div下方创建一个空间，然后在其后的下一个div。

我正在使用angular js ng-repeat创建所有div。 我使用的代码如下：

<div id="form" ng-controller="JobApplicationFormController">
    <div class="col-lg-12 col-md-12 col-sm-12">

        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" ng-repeat="x in categorylist" style="margin-bottom:10px">
            <div class="card1">

                <div class="container1">
                    <div style="border-bottom:1px solid #ccc;padding: 5px;margin-left: -16px;margin-right: -16px;font-size:20px !important;color:black">
                        <img src="~/Images/form.ico" style="height:50px" /> <b>{{x.categoryName}}</b>
                    </div>

                    <div ng-repeat="y in formlist" ng-if="y.categoryId==x.id" id="{{y.id}}" onclick="return popitup('../../Applications/Form/' + this.id)" class="formlist" title="click to upload" style="cursor:pointer;padding: 5px;margin-left: -16px;margin-right: -16px;border-bottom:1px solid #ccc;">

                        <a href="#" style="text-decoration:none" ng-if="y.status=='Completed'" ><img src="~/Images/green_circle.png" style="height:15px" />&nbsp;<font color="green"> {{y.formName}} </font></a>
                        <a href="#" style="text-decoration:none" ng-if="y.status!='Completed'" ><img src="~/Images/red_circle.png" style="height:15px" />&nbsp;<font color="red"> {{y.formName}} </font> </a>
                        </div>


                </div>
            </div>

            </div>
    </div>

我已经尝试过此操作[Auto adjusting div based on inside content供参考，但无法正常工作。内容溢出。

Edit1：我确实已经尝试过此[CSS-only masonry layout but with elements ordered horizontally，但它并没有使我接近要实现的目标。 div部分是造成很多麻烦的原因。