ввод с метками в поле содержимого оставшейся ширины

Question

У меня проблемы с оформлением моего пользовательского окна контента. Поле содержимого содержит несколько полей label и input. Поле содержимого имеет width 500 пикселей.

Некоторые из labels длиннее других, однако входные данные всегда должны быть такими же большими, как окна (- немного пустого пространства).

Это HTML-код, который у меня сейчас есть:

<div class="content">
    <div class="row">
        <label for="test1">This is a test #1</label>
        <input type="text" name="test1">
    </div>
    <div class="row">
        <label for="test2">This is a test #2</label>
        <input type="text" name="test2">
    </div>
    <div class="row">
        <label for="test3">But this is a test with a much longer label</label>
        <input type="text" name="test3">
    </div>
</div>

А это CSS:

.content {
    border: 1px solid #000;
    width: 500px;
    height: 500px;
}

.row {
    margin-top: 5px;
}

input {
    width: 385px;
}

Как видно из скрипки: https://jsfiddle.net/4ga3533o/ вы можете видеть, что первые 2 'rows' работают правильно, однако по третьему, input ниже label, потому что ширина длиннее чем окно содержимого, как я могу заставить его работать так, чтобы метки могли иметь разную длину, но ширина занимает только оставшееся пространство ширины?

Answer 1

Вы можете flex

.content {
  border: 1px solid #000;
  width: 500px;
  height: 500px;
}
.row {
  margin-top: 5px;
  display: flex;
}
input {
  flex: 1;
}
label {
  margin-right: 10px;
}

<div class="content">
  <div class="row">
    <label for="test1">This is a test #1</label>
    <input type="text" name="test1">
  </div>
  <div class="row">
    <label for="test2">This is a test #2</label>
    <input type="text" name="test2">
  </div>
  <div class="row">
    <label for="test3">But this is a test with a much longer label</label>
    <input type="text" name="test3">
  </div>
</div>

Answer 2

display: flex будет лучшим решением для вашей проблемы. Попробуйте этот код.

<div class="content">
  <div class="form-wrap">
    <label for="test1">This is a test #1</label>
    <input type="text" name="test1">
  </div>
  <div class="form-wrap">
    <label for="test2">This is a test #2</label>
    <input type="text" name="test2">
  </div>
  <div class="form-wrap">
    <label for="test3">But this is a test with a much longer label</label>
    <input type="text" name="test3">
  </div>
</div>

.content {
  border: 1px solid #000;
  width: 500px;
  height: 500px;
}

.row {
  margin-top: 5px;
}

input {
  width: 385px;
}

.form-wrap {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}

.form-wrap label {
  width: 40%;
}