输入类型搜索，如 Chat GPT 搜索输入带图标。输入图标未在输入中设置

问：

我有一个带有图标的输入，例如 Chat GPT 搜索输入，在一些行之后，它的图标上升，我想修复它在同一位置。这是我的代码。如果我添加更多行，我希望它首先显示的位置，同样显示它的位置并转到底部。 如果有人有兴趣，请给我一个好的答案。提前致谢！

输入的 HTML

 <div class="chat-input-container">
    <div class="input-container" ng-class="{'scrollable': shouldShowScroll()}">
        <div contenteditable="true" class="input-field" ng-model="setSearchInputValue"
            ng-keypress="onKeyPress($event)"></div>
        <md-button class="md-icon-button" ng-disabled="setSearchInputValue.trim().length === 0">
            <md-icon md-font-icon="material-icons"
                ng-disabled="setSearchInputValue.trim().length === 0">send</md-icon>
        </md-button>
    </div>

输入的 js

 $scope.shouldShowScroll = function () {
            var inputField = document.querySelector('.input-field');
            var lineHeight = parseInt(window.getComputedStyle(inputField).getPropertyValue('line-height'));
            var maxLines = 8; 
            return inputField.scrollHeight > lineHeight * maxLines;
        };

输入的 CSS

    #input {
        word-wrap: break-word;
    }

    .bg-yellow {
        background-color: lightyellow;
    }

    .bg-green {
        background-color: #eafef6;
    }

    .chat-input-container {
        position: relative;
        display: flex;
        align-items: center;
        border: 1px solid #ddd;
        padding: 5px;
        bottom: 0;
        width: 40%;
        z-index: 1;
        border-radius: 10px;
        margin-left: 450px;
        /* remove margin to use any where*/
        margin-top: 50px;
    }

    .input-container {
        flex: 1;
        overflow-y: hidden;
        max-height: 300px;
        position: relative;
        text-transform: capitalize;
        display: flex;
        align-items: flex-start;
        /* Align items to the start of the flex container */
        flex-wrap: nowrap;
    }

    .scrollable {
        overflow-y: auto;
    }

    .input-field {
        min-height: 25px;
        height: auto;
        border: none;
        outline: none;
        padding: 5px 5px 10px 5px;
        font-size: 16px;
        resize: none;
        width: 90%;
        line-height: 20px;
        white-space: webkit-nowrap;
        word-wrap: break-word;
        text-transform: capitalize;
        flex: 1;
    }

    md-button {
        bottom: 0;
        min-width: 40px;
        background-color: #0078D7;
        color: #fff;
        margin-left: 6px;
        align-self: flex-end;
    }

    md-button md-icon {
        font-size: 24px;
    }

    md-button:hover {
        background-color: #005A9E;
    }

    .md-button.md-icon-button {
        margin: 0 6px;
        height: 40px;
        min-width: 0;
        line-height: 24px;
        padding: 8px;
        width: 40px;
        border-radius: 50%;
        margin-left: 6px;
        align-self: flex-end;
    }