CSS : How to make two column right fluid left fluid depend on right

Question

I already search and there is no exactly solution for me. I am trying to making Two Columns:

Left fluid + Right fluid.

Left column is contain input box with 100% width and the left column width is depend on right column width.

• B is just a text div but I don't know a text's length. It is dynamic length.

• A is just input box.

So if B is longer text, A should be shorter.

Please take look at the below image

Any suggestion?

Answer 1

You can use Flexbox and just set flex: 1 on input.

.el {
  display: flex;
}
input {
  flex: 1;
  background: #A3FF9A;
}
p {
  background: #FF87DE;
  margin: 0;
}

<div class="el">
  <input type="text">
  <p>Lorem ipsum dolor.</p>
</div>