Как динамически растягивать поле input?

Question

Нужно динамически растянуть поле input, без привяски к ширине контейнера и с отступами.

В итоге чтобы было как у таблиц, ширина подстраивается по максимальному значению, поле input занимает максимальную ширину, также учесть адаптивность, если не влазиет то строить блоки друг под другом.

input {
  width: 100%;
  min-width: 100px;
  display: block;
}
.row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #9f9f9f;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 5px;
}
.row > div:not(:last-child) {
  margin-right: 5px;
}

<div class="row">
  <div><input type="text" name="title" value="12345"></div>
  <div><button>Connect</button></div>
</div>
<div class="row">
  <div>Group 1</div>
  <div><input type="text" name="title" value="12345"></div>
  <div><button>Connect</button></div>
</div>
<div class="row">
  <div>Group 20</div>
  <div><input type="text" name="title" value="12345"></div>
  <div><button>Connect</button></div>
</div>

Answer 1

input {
  flex:1;
}
.row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #9f9f9f;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 5px;
}
.row > div:not(:last-child) {
  margin-right: 5px;
}

<div class="row">
  <input type="text" name="title" value="12345">
  <div><button>Connect</button></div>
</div>
<div class="row">
  <div>Group 1</div>
  <input type="text" name="title" value="12345">
  <div><button>Connect</button></div>
</div>
<div class="row">
  <div>Group 20</div>
  <input type="text" name="title" value="12345">
  <div><button>Connect</button></div>
</div>

БЛОГ НА HUSL

Как динамически растягивать поле input?

Ответы (1 шт):