Update input-group.md with form text example (#37406)

* Update input-group.md with form text example

This updated example shows where to correctly put form text (i.e. not inside the input group).

* Fix markup

* Update input-group.md

Co-authored-by: Mark Otto <markd.otto@gmail.com>

diff --git a/site/content/docs/5.2/forms/input-group.md b/site/content/docs/5.2/forms/input-group.md
index 00e9eeec9a6f8cff761fc3bf704f61b23f1b8304..01be5cffed592c1d13aa2675f74efcb2ff48e2b7 100644 (file)
--- a/site/content/docs/5.2/forms/input-group.md
+++ b/site/content/docs/5.2/forms/input-group.md
@@ -21,10 +21,13 @@ Place one add-on or button on either side of an input. You may also place one on
   <span class="input-group-text" id="basic-addon2">@example.com</span>
 </div>
 
-<label for="basic-url" class="form-label">Your vanity URL</label>
-<div class="input-group mb-3">
-  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
-  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+<div class="mb-3">
+  <label for="basic-url" class="form-label">Your vanity URL</label>
+  <div class="input-group">
+    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
+    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+  </div>
+  <div class="form-text">Example help text goes outside the input group.</div>
 </div>
 
 <div class="input-group mb-3">