CSS – making an element short on its own

So basically I made an input element of 90% of the parent element’s width.
I have created a span tag after the input element. So I want that according to the content of the span tag, the input element should resize and become short on its own.
But I am having problem in doing that so…

here is the html code:

<div class="input-field">
                    <p> Full Name </p>
                    <input type="text" placeholder="Enter your full name">
                    <span>Must be your full name</span>
</div>

here is the css code: (here in the code I have NOT typed in the methods I tried, they are below the code)

.input-field input{
    width: 450px;
    max-width: 90%;
    height: 30px;
}

I have tried auto, resize, etc but nothing worked.

.input-field input{
    width: 450px auto;
    max-width: 90%;
    height: 30px;
}

Using auto just made it originally smaller

.input-field input{
    width: 450px;
    resize: auto;
    max-width: 90%;
    height: 30px;
}

I tried resize as well but it did nothing.. I also tried resize: horizontally;

So I need help..

>Solution :

Wrap the input and span in a flexbox container and the stop the span from wrapping.

.input-field input {
  height: 30px;
}

.input-field {
  background: lightblue;
}

.wrap {
  display: flex;
  align-items: center;
}

.wrap input {
  flex: 1 1 450px;
  max-width: 90%;
  min-width: 0;
}

.wrap span {
  white-space: nowrap;
}

<div class="input-field">
  <p> Full Name </p>
  <div class="wrap">
    <input type="text" placeholder="Enter your full name">
    <span>Must be your full name</span>
  </div>
</div>

<div class="input-field">
  <p> Full Name </p>
  <div class="wrap">
    <input type="text" placeholder="Enter your full name">
    <span>Must be your really long full name</span>
  </div>
</div>