make col height dynamic within a row bootstrap

I have a html page that have a row and some col, and when a col have lot of element all other col take the same height, So I would like to every col take dynamically its own height :

this my code :

<div class="container">
   <div class="row auto-clear-xs auto-clear-lg">
      <div class="col-xs-6 col-lg-3">
         <fieldset>
            <legend>ccccc</legend>
            <div>dgf</div>
            <div>fvdv</div>
            <div>dfvsf</div>
         </fieldset>
      </div>
      <div class="col-xs-6 col-lg-3">
         <fieldset>
            <legend>YYYY</legend>
            <div>xxx</div>
            <div>xxxxx</div>
            <div>test</div>
            <div>ccccc</div>
            <div>g</div>
            <div>jjjjjjjjj</div>
            <div>gggggggggggg</div>
            <div>zzzzzzzzzz</div>
            <div>xxxxxxxxxxxx</div>
         </fieldset>
      </div>
      <div class="col-xs-6 col-lg-3">
         <fieldset>
            <legend>dsd</legend>
            <div>cssq</div>
         </fieldset>
      </div>
      <div class="col-xs-6 col-lg-3">
         <fieldset>
            <legend>Games</legend>
            <div>xxxx</div>
            <div>cccc</div>
            <div>oooo</div>
         </fieldset>
      </div>
      <div class="col-xs-6 col-lg-3">
         <fieldset>
            <legend>test</legend>
            <div>fds</div>
            <div>gfg</div>
            <div>dsd</div>
         </fieldset>
      </div>
   </div>
</div>

and this the result :

enter image description here

the yelow space that must be removed.

from Recent Questions - Stack Overflow https://ift.tt/3dZAKY5
https://ift.tt/eA8V8J