input-group renders differently for form-control-plaintext than with form-control

[rjpaulsen]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

The button should render at the end of a read-only field, not on the next line.

<div class="row">
    <label for="FieldString1" class="col-3 col-form-label">My Label</label>
    <div class="col-9">
        <span class="input-group">
            <input id="FieldString1" type="text" value="My Text" class="form-control"   />
            <a href="#" class="btn btn-primary">View Details</a>
        </span>
    </div>
</div>
<div class="row">
    <label for="FieldString2" class="col-3 col-form-label">My Label</label>
    <div class="col-9">
        <span class="input-group">
            <input id="FieldString2" type="text" value="My Text" class="form-control" readonly />
            <a href="#" class="btn btn-primary">View Details</a>
        </span>
    </div>
</div>
<div class="row">
    <label for="FieldString3" class="col-3 col-form-label">My Label</label>
    <div class="col-9">
        <span class="input-group">
            <input id="FieldString3" type="text" value="My Text" class="form-control-plaintext" readonly />
            <a href="#" class="btn btn-primary">View Details</a>
        </span>
    </div>
</div>

Reduced test cases

https://codepen.io/rjpaulsen/pen/gOeppxK

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

v5.1.3

[mdo]

Removing this from a release project for now while we consider this option. I understand the request, but it involves adding a little code to restyle the plaintext input to add a border, add some padding, and maybe more for it to match the other components. Fixing just the wrapping issue isn't enough IMO.