Remove space below text_area

In my Rails 5 app I’m using Bootstrap for modal. Inside that modal I’ve got text_area under which I created a character counter. The issue is that I want to have this counter right below the text_area like this:

Right now I’ve got some space between instead

Form:

<%= form_for @note, :url => registrant_notes_path(@registrant), remote: true do |f| %>
  <div class="text-note">
    <%= f.label :body, 'Add note' %>
    <%= f.text_area :body, maxlength: 1000, id: "review_text" %>
    <p class='error'><%= show_errors(@note, :body) %></p>

    <div class="counter-text">
      <span id="counter" data-maximum-length="1000"><%= 1000 %></span> chars left / 1000 character max
    </div>
    <%= f.hidden_field :administrator_id, value: current_login.id %>
    <%= f.hidden_field :registrant_id, value: @registrant.id %>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <%= f.submit "Save", class: "btn btn-primary" %>
  </div>
<% end %>

css:

.modal-footer {
    border-top: 0 none;
}

.counter-text {
  border-top: 0 none;
  text-align: right;
}

#review_text {
  min-height: 54px;
  width: 100%;
}

[Edit]

After pasting images I discovered that text_field and buttons are not in the same line – text_field is a bit wider, is it possible for them to be the same?

>Solution :

The additional space is caused by the empty <p> tag:

<p class='error'><%= show_errors(@note, :body) %></p>

<p> will occupy vertical space even if it has no contents (thus why its missused so widly). To get rid of it you should rewrite your helper method so that the tag is only generated if there are errors for that field.

def show_errors(object, attribute)
  return unless object.errors.key?(attribute)
  tag.p(class: 'error') do
    # ... do your thing
  end
end