How can I position two buttons below a text_area, aligned with the bottom right corner of the text area? Here is what I have tried so far:
https://i.sstatic.net/UcD2F.png
Current code snippet:
form with modal
<%= 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" %>
<%= show_errors(@note, :body) %>
<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 styling:
.modal-footer {
border-top: 0 none;
}
.counter-text {
border-top: 0 none;
text-align: right;
}
#review_text {
min-height: 54px;
width: 100%;
}