Bootstrap .row columns are always same height

Question

So i am creating AngularJS, PHP, mySQL application with use of bootstrap. I am using the grid pattern on my website but i would like to have the columns to be dynamic. So as much content that's in it, as much height of the column. But if i have 2 columns beside each if there is more content in the second column, the first has equal height. I was looking for an anwser but every topic is reversed to mine. Every question i have found was with people that had problem to have the columns on equal height. So This is my code :

<div class="row" style="margin-top: 10px;">
<div class="col-lg-3" style="margin-top: 10px; padding: 10px; border: 1px solid black;">
  <div class="insider">
  <h4> Filters : </h4>
    <input type="text" class="form-control" placeholder="Szukaj..." ng-model="search"></br>
<div id="accordion"  onselectstart="return false;">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-default btn-block" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Categories
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <div class="custom-control custom-checkbox" ng-repeat="item in categories">
            <input type="checkbox" ng-click="currentPage=0" ng-model="item.checked" value="{{item.checked}}" class="custom-control-input" id="checkbox-{{item.name}}">
            <label class="custom-control-label" for="checkbox-{{item.name}}">{{item.name}}</label>
          </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-default btn-block" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Brands
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        <div class="custom-control custom-checkbox" ng-repeat="item in brands">
            <input type="checkbox" ng-model="item.checked" value={{item.checked}} class="custom-control-input" id="checkbox-{{item.name}}">
            <label class="custom-control-label" for="checkbox-{{item.name}}">{{item.name}} </label>
          </div>
      </div>
    </div>
  </div>
</div>
<button type="button" class="btn btn-outline-primary btn-block">Clear Filters</button>
</div>
</div>
  <div class="col-lg-9" style="margin-top: 10px;">
    <div class="insider">
    <div class="well" style="padding:20px; border: 1px solid black;" ng-repeat="item in products | filter:search | startFrom:currentPage:perPage">
  <h4>
    <strong>{{item.name}}</strong>
    <span class="float-right badge badge-info">
      {{item.price | currency}}
    </span>
  </h4>
  <button ng-click="getProductsOnAdd(item);" class="btn btn-success float-right">Dodaj do koszyka</button>
  <span class="lead">{{item.description}}</span>
  </div>
  <div class="alert alert-warning" ng-show="products.length == 0">
    We didn't find any result with this criteria.
    <a ng-click="getProductsFunction()" class="alert-link">Click here to reset filters.</a>
  </div>
</div></br>
  <ul uib-pagination boundary-links="true" items-per-page="perPage" total-items="(products | filter:search).length" ng-model="currentPage" class="pagination float-right" max-size="maxSize" boundary-link-numbers="true" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></ul>
</div>
</div>

This is part of css i have added but it didn't help, there was much more tries from me but none of those worked :

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

This is how it looks now:

And here the part i want to remove :