This works by setting the card to the same height as its containing flexbox. For perfect alignment, we need to make sure the extra margin at the bottom of the text-area stops applying when they are shown side by side.
<div class="form-group">
<label><%= object.class.human_attribute_name(attribute) %></label>
<div id="<%= id %>_container" class="form-row richtext_container">
<div class="form-group">
<label><%= object.class.human_attribute_name(attribute) %></label>
<div id="<%= id %>_container" class="form-row richtext_container">
- <div id="<%= id %>_content" class="col-sm-8 mb-3 richtext_content">
+ <div id="<%= id %>_content" class="col-sm-8 mb-3 mb-sm-0 richtext_content">
<%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %>
<div id="<%= id %>_preview" class="richtext_preview richtext text-break"></div>
</div>
<div id="<%= id %>_help" class="col-sm-4 richtext_help">
<%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %>
<div id="<%= id %>_preview" class="richtext_preview richtext text-break"></div>
</div>
<div id="<%= id %>_help" class="col-sm-4 richtext_help">
- <div class="card bg-light">
+ <div class="card bg-light h-100">
<div class="card-body">
<%= render :partial => "shared/#{type}_help" %>
<%= submit_tag t(".edit"), :id => "#{id}_doedit", :class => "richtext_doedit btn btn-primary", :disabled => true %>
<div class="card-body">
<%= render :partial => "shared/#{type}_help" %>
<%= submit_tag t(".edit"), :id => "#{id}_doedit", :class => "richtext_doedit btn btn-primary", :disabled => true %>