change size of input based on sibling text

Question

I have an input element with some text following it. For example:

<input type="email" required/> simple   text

I need to change width of input depending on size of text. If there is much more text, then width of the input should shrink.

Is this possible with flex or CSS for older browsers? Also, the width of the input is only dependent upon the text next to it, not it's own value.

i think it'll be work, but may be it is possible to make with flexboxes ? — Redair, Sep 28 '17 at 12:38
take a look here: https://stackoverflow.com/questions/30520858/dynamically-adjust-html-text-input-width-to-content — Calaris, Sep 28 '17 at 12:40
I don't won't magically expand the input based on the content you've entered. Just need flex input depends of text block near it. I edited question to make it clear. — Redair, Sep 28 '17 at 12:47
Not without wrapping the text in an element it isn't I suspect. — Paulie_D, Sep 28 '17 at 13:06

score 2 · Accepted Answer · answered Sep 28 '17 at 13:08

Check out the snippet. Hope this is what you are looking for. I wrapped your text content in a span. It is not possible to achieve the desired effect without wrapping.

Using flex-shrink none for the text item and min-width: 0 for input box In order for each item to stay within the container as the initial setting on flex items is min-width: auto.

.wrapper{
  display: flex;
  display: -webkit-flex;
  margin: 20px 0;
  background: #ddd;
  padding: 10px;
  width: 200px;
}
span{
  flex-shrink: 0;
}
input {
  min-width: 0;
}

<div class="wrapper col-md">
  <input type="email" required/> <span>simple text is</span>
</div>

<div class="wrapper col-md">
  <input type="email" required/> <span>simple text is another text</span>
</div>

change size of input based on sibling text

1 Answers1