Input group: fix styles for labels and images

[WinterSilence]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Proposal

1. Add class .input-group-block for stretched elements like as img
2. Add styles for "image" inputs/buttons
3. Labels inside input group: use .input-group-text styles for label.form-label/label.col-form-label

Motivation and context

1. something like this:

.input-group {
  > .input-group-block {
    display: flex;
    position: relative;
    width: auto;
    height: 100%;
    padding: 0;
    margin: 0;
    border: $input-border-width solid $input-group-addon-border-color;
    @include border-radius($input-border-radius);

    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

For example, CAPTCHA input group:

<div class="input-group">
   <img class="input-group-block" src="/captcha/" alt="Code">
   <input class="form-control" type="text" name="captcha" size="6" required>`
</div>

2. <input class="form-control" type="image" src="/captcha/" title="Click to reset code">

3. place <label>s outside the input group

is strange behavior, why not use input groups for fields like as date range?

<div class="input-group">
   <label class="form-label" for="date-from">From</label>
   <input class="form-control" id="date-from" name="date_from" type="date">
   <label class="form-label" for="date-to">To</label>
   <input class="form-control" id="date-to" name="date_to" type="date">
</div>