如何使用 position: absolute 制作响应式图标

Question

我想要的是在我的两个 input 元素中有一个图标，它可以在移动视图中响应。但问题是我对什么以及如何使用正确的 css 感到困惑，所以我尝试使用 position: absolute 但仍然未能完成。

这是我的html代码

.date-icon-color{
  color: #9E98AA;
  position: absolute;
  width: 25px;
  right: 0;
}
.update-icon-color{
  color: #9E98AA;
  position: absolute;
  width: 25px;
  right: 0;
}

<ng-template #date_time>
  <div class="form-group col-sm-6 custom-gutter">
    <label for="dateAndTime" class="control-label required">Date and Time of Incident</label
            >
            <input
              formControlName="dateTimeOfIncident"
              (click)="dplu.toggleCalendar()"
              class="offShadow form-control"
              angular-mydatepicker
              [options]="dpo.myDpOptionsDisabledPrevious"
              placeholder="Select Date"
              maxLength="10"
              #dplu="angular-mydatepicker"
              readonly
            />
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="date-icon-color"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              style="margin-right: 10px"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
          </div>
</ng-template>

<ng-template #file_log>
          <div class="form-group upload col-sm-6 custom-gutter">
            <label class="control-label" for="fileUpload">Choose File</label>
    <div class="file-div">
      <div class="
                  d-flex
                  label
                  flex-grow-1
                  text-dark-gray
                  align-items-center
                ">
        <input type="file" class="offShadow form-control" id="fileUpload" />
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 update-icon-color" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="margin-right: 10px">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                  />
         </svg>
      </div>
    </div>
  </div>
  <div *ngIf="logging == 'yes'" class="form-group col-sm-6">
    <label for="Email" class="control-label required">Email</label>
    <input type="text" formControlName="Email" (keyup)="searchByEmail($event)" (click)="clickedBtn('emailTrigger')" id="Email" class="offShadow form-control" />
    <div *ngIf="emailTrigger">
      <div class="email-drop" [ngClass]="{ dropAnimate: emailTrigger }">
        <div class="marginItems custom-scroll">
          <div class="scroll-container">
            <div *ngFor="let details of filteredByEmails.usersList">
              <div class="details-container click-cursor" (click)="saveEmail(details)">
                <label for="details" class="ppData label-font-md">
                            {{ details.email }}
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <span class="containerLink" *ngIf="filteredByEmails.usersList">
                  Showing {{ filteredByEmails.usersList.length }} results
                </span>
    </div>
    <!-- <div *ngIf="(emailContent.invalid && emailContent.touched) || emailContent.dirty">
              <small *ngIf="emailContent.errors?.pattern" class="text-danger">Please provide a valid email address</small>
            </div> -->
  </div>
</ng-template>

这是非移动视图中的图像

这是移动视图