Почему все мои элементы в .row не имеют одинаковой высоты?

Как сделать так, чтобы все элементы имели одинаковую высоту, без необходимости определять статическую высоту?

[

http://jsfiddle.net/o5fjsgur/

    <div class = "row">
      <div class = "col-sm-12 col-md-5 flex-center" style = "border:1px solid red;">
        <div class = "md-form">
            <select class = "browser-default custom-select" mdbInput mdbValidate   >
                <option   >CAMBIARR esta joda</option>
            </select>
        </div>
      </div>
      <div class = "col-sm-12 col-md-1 flex-center" style = "border:1px solid red;height: 100%;">
        <div style = "height: 100%;">
          holi
        </div>
      </div>
      <div class = "col-sm-12 col-md-5" style = "border:1px solid red;">
        <div class = "md-form m-0 p-0 flex-center mt-3">
            <div class = "form-check">
              <input type = "radio" class = "form-check-input" id = "creacion" name = "creacion_soporte" mdbInputDirective>
              <label class = "form-check-label" for = "creacion">Creación</label>
            </div>
            <div class = "form-check" >
              <input type = "radio" class = "form-check-input" id = "soporte" name = "creacion_soporte" mdbInputDirective>
              <label class = "form-check-label" for = "soporte">Soporte</label>
          </div>
        </div>
      </div>
    </div>