如何限制Bootstrap中.form-text宽度与上方input宽度一致？

我在Bootstrap的网格布局里，给<input>搭配了.form-text来展示附加信息，二者处于跨多列的网格结构中。.form-text所在<div>内的文本是动态内容，长度可能会把网格列撑宽。

参考Bootstrap官方示例的结构：

<form class='ref-table'>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else. We'll never share your email with anyone else. We'll never share your email with anyone else.</div>
  </div>
</form>

默认状态下.form-text和<input>宽度一致，但给<input>添加style='width: auto'后，.form-text就会超出<input>的宽度。我想要的效果是文本能按照<input>的宽度自动换行。

更新

下面是能复现问题的实际示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
      body {
        background: #6e28d9;
        padding: 0 24px;
        color: white;
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .grid {
        display: grid;
        grid-template-columns: 2rem max-content max-content min-content minmax(2rem, min-content) min-content auto;
        gap: 1rem;
        overflow-x: hidden;
      }

      .grid-span {
        grid-column: 4 / span 4;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class='grid'>
      <div style='background-color: green'>1</div>
      <div style='background-color: blue'>2</div>
      <div style='background-color: yellow'>3</div>
      <div style='background-color: cyan'>4</div>
      <div style='background-color: pink'>5</div>
      <div style='background-color: orange'>6</div>
      <div style='background-color: purple'>7</div>

      <div class='grid-span' style='background-color: fuchsia'>
        <form>
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" style='width: auto'>
            <div id="emailHelp" class="form-text">We'll never share your email with anyone else. We'll never share your email with anyone else. We'll never share your email with anyone else.</div>
          </div>
        </form>
      </div>
    </div>

  </body>
</html>

我希望文本在图中标注的黑线位置换行，别让它把上方的“7”列撑宽——因为.form-text的文本是动态变化的，会导致该列的元素错位。

内容的提问来源于stack exchange，提问作者orange