I am trying to make the divs children of class .row have the same height. I am trying to make the button that is on the right (close icon), center vertically and horizontally occupying all the height that should have with respect to the div that is on the left.

this is my code:

        <div class="row mb-0 pb-0 d-flex" style="border:1px solid red;">
          <div class="col-sm-8 mb-0 pb-0" style="border:1px solid blue;">
            <div class="md-form mt-4">
              <textarea type="text" id="objetivo_especifico" class="md-textarea form-control" formControlName="objetivo_especifico"  mdbValidate  mdbInputDirective></textarea>
              <label for="objetivo_especifico">Objetivo Específico</label> 
            </div>
          </div>
          <div class="col-sm-4 flex-center" style="border:1px solid blue;">
            <a mdbBtn size="sm"  floating="true" class="m-0" mdbWavesEffect  mdbTooltip="Cancelar" placement="top"  class="btn-pin waves-light animated mr-8 bola_roja p-0 m-0" >
              <mdb-icon icon="close"></mdb-icon>
            </a>
          </div>
        </div>

but tested this same code in an earlier version of bootstrap, and it works. Why does this happen? If bootstrap is implementing this problem, it should not happen.

http://jsfiddle.net/e5jv1fo6/