Change input size based on characters entered

I have an input with an amount inside, it either comes from the backend, or the user manually enters the amount
There is also a block with the EUR currency.

How can I make the block with the EUR currency move dynamically to the right, based on the symbols entered by the input

enter image description here

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>

        <Wrapper className={wrapClassName}>
            <div className='input_content_wrapper'>
                <div className='input_content'>
                    <h4 className='title'>{title}</h4>
                    <label className="input_wrapper">
                        <input
                            placeholder='0'
                            {...rest}
                            value={value}
                            type="text"
                            className={cn('input', { error: Boolean(error) })}
                            onBlur={handleBlur}
                            onChange={type !== 'text' ? handleChange : (e: any) => onChange(e.target.value)}
                    
                        />
                        {currency && <div className={cn('currency', { error: Boolean(error) })}>{currency}</div>}
                    </label>
                </div>
                {extra && <div className='extra'>{extra}</div>}
            </div>
            {error && <div className='validation'>{error}</div>}
        </Wrapper>