[BUG] Input-icon with form-control-plaintext

[jchine]

Browser

Firefox 121.0.1, Chrome 120.0.6099.225, Edge 120.0.2210.114 (any browser)

OS

Windows 10

Screen size

1920x1080

Describe the bug

There are no classes that relate .input-icon with .form-control-plaintext.
When used together, the icon appear above the text

How to reproduce

1. Create

<div class="mb-3">
  <label class="form-label">Icon input</label>
  <div class="input-icon mb-3">
    <div class="form-control-plaintext">Input value</div>
    <span class="input-icon-addon">
         <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 9v2m0 4v.01"></path>
        <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
      </svg>
    </span>
  </div>
  <div class="input-icon mb-3">
    <span class="input-icon-addon">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 9v2m0 4v.01"></path>
        <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
      </svg>
    </span>
    <div class="form-control-plaintext">Input value</div>
  </div>
</div>

2. Solution
   Add class in src/scss/ui/forms/_form-icon.scss

  .form-control-plaintext:not(:last-child) {
    padding-right: 2.5rem;
  }

  .form-control-plaintext:not(:first-child) {
    padding-left: 2.5rem;
  }

Screenshots

No response

JSFiddle

No response