CSS - making an element short on its own

Question

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:

here is the css code that

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

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

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..

Answer 1

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>