flexText- <pre> expands more that it should

Question

I have a modal dialog which have textareas for entering subject and message.

<div class="field-group convo-body">
   <div class="convo-sub">
    <textarea  class="subject msg" rows="1" id="subject" name="subject"        placeholder="Subject" maxlength="255"></textarea>
   </div>
 <div class="convo-msg">
    <textarea class="body msg" placeholder="Say Something" name="message" id="message"></textarea>
   </div>
</div> 

At the bottom of the modal I have 2 buttons:

  <div class="modal-footer">
      <a href="#" class="cancel-btn" data-dismiss="modal"><g:message code="buttons.cancel"/> </a>
      <button type="submit" id="submitNew" class="button-blue" disabled><g:message code="message.details.buttons.send"/></button>
                </div>

I use the flexText on each textarea for expanding.

In order ensure that typography, padding, border-width (and optionally min-height) are identical across textarea & pre I add css style to the both of the pre

.convo-sub .flex-text-wrap pre {
    min-height: 2em;
    font-size: 28px;
    line-height: 1.313;
}

.convo-msg .flex-text-wrap pre {
    min-height: 2em;
    font-size: 21px;
    line-height: 1.313;
}

The problem that the distance (blank) between the the textarea and the buttons increases