Validation error for inline radios

Created by: vpratfr

I have a group of radio buttons displayed inline.

Problem is that the error message shows up right after the last option.

It should instead display below the inlined radios.

Below is the snippet to reproduce :

<div class="form-group">
    <div class="radio-group" id="inline_radio_field_radio_group" aria-describedby="inline_radio_field_helptext">
        <div class="custom-control-inline custom-control custom-radio">
            <input class="custom-control-input is-invalid" type="radio" name="inline_radio_field"
                   id="inline_radio_field_choice_1" value="choice_1">
            <label class="custom-control-label" for="inline_radio_field_choice_1">Choice 1</label>
        </div>
        <div class="custom-control-inline custom-control custom-radio">
            <input class="custom-control-input is-invalid" type="radio" checked="checked" name="inline_radio_field"
                   id="inline_radio_field_choice_2" value="choice_2">
            <label class="custom-control-label" for="inline_radio_field_choice_2">Choice 2</label>
        </div>
        <div class="custom-control-inline custom-control custom-radio">
            <div class="invalid-feedback">This is an error below the inline radio group</div>
            <input class="custom-control-input is-invalid" type="radio" name="inline_radio_field"
                   id="inline_radio_field_choice_3" value="choice_3">
            <label class="custom-control-label" for="inline_radio_field_choice_3">Choice 3</label>
            <div class="invalid-feedback">This is an error below the inline radio group</div>
        </div>
    </div>
    <small class="text-muted" id="inline_radio_field_helptext">... and another radio group, shown inline this time
    </small>
</div>