Vertical spacing for form with both p.text-help and p.text-muted is broken

Created by: tordans

A form layout we use very regularly is an input with a help-text below which also can have an error message.

Right now, the error case looks like this:

IMO the spacing is broken, it should look like this:

The generated html for this case is:

<div class="form-group string required registration_name has-danger">
  <label class="string required sr-only form-control-label" for="registration_name">Name</label>
  <input class="string required form-control-lg form-control" placeholder="Name" type="text" value="" name="registration[name]" id="registration_name">
  <p class="text-help">can't be blank</p>
  <p class="text-muted">Lorem</p>
</div>

A possible css fix might be something like this:

p.text-help ~ p.text-muted {
  margin-top: -16px;
}

Note: I cannot just add a .m-b-0 in this case since the html is generated by simple_form which has no way of distinguishing those cases.

Questions:

• Is there a "proper" way to write this kind of form? What would be a better alternative to the P-Tags that uses the default-font-sizing but not the P-Tag-Margins?
• Is this a usage that should be fixed in Bootstrap4 with specific css or should I work around it in my custom css?