Wrap the Content inside the Input Value-CodePudding

Is there any way to wrap the content with the input field, in my case is taking a size, but I would like for example if it is the value "123" for the input to be wrapped around the text, and when we type more words it grows in size, without having a fixed size like this in the screenshot.

Screenshot of the Input Text Field 1

My Component structure JSX:

 <Container {...props}>
    <Input placeholder="New Skill" />
    <AddIcon color="#0056FC" />
 </Container>

Here is CSS, using Styled Components:

const Container = styled.section`
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 7px 10px;
    gap: 10px;
    background: transparent;
    border-radius: 4px;
    border: 1px solid ${props => props.theme.border};
`

const Input = styled.input`
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #455560;
    border: 0;
    background: transparent;
    display: flex;

    &::placeholder{
        color: #0056FC;
    }
`

CodePudding user response：

You've already got the right answer, I just wanted to show the contenteditable strategy to achieve the same result:

.content {
  display: flex;
}

#field {
  min-width: 3rem;   /*3 chars min length*/   
  border: 3px solid gray;
  cursor: text;  
  padding: 5px;
}

<div >  
  <h1 contentEditable="true" id="field"></h1>
</div>

CodePudding user response：

I think now that must work.

span {
  padding: 5px;
}
     
div {
  display: flex;
  width: max-content;
}

<div>
  <span>Input Field :</span>
  <input type="text" oninput="this.size = this.value.length   1"  size="1">
</div>