Несколько полей ввода выровнены в одной строке

Question

Значение по умолчанию (с любым стилем) для ввода 2 уже выровнено в той же строке, но я хочу, чтобы второе поле имело фиксированную ширину, и оно будет отзывчивым.

input, select {
    width:100%;
}
select {
    width:100px;
    float:right;
}
}

<div class="rowWrap">
    <input type="datetime-local" class="datetime" name="datetime" value="" placeholder="Date - Time *" />
    <select class="pax">
        <option value="1">1 pax</option>
        <option value="2">2 pax</option>
        <option value="3">3 pax</option>
        <option value="4">4 pax</option>
        <option value="5">5 pax</option>
    </select>
</div>

Answer 1

Вы имеете в виду, как ниже? С select будучи фиксированной шириной, вы можете использовать calc сделать input занять оставшееся место. box-sizing:border-box гарантирует, что размеры остаются такими, как ожидалось.

input,
select {
  box-sizing: border-box;
  height: 20px;
}
input {
  width: calc(100% - 100px);
}
select {
  width: 100px;
  float: right;
}

<div class="rowWrap">
  <input type="datetime-local" class="datetime" name="datetime" value="" placeholder="Date - Time *" />
  <select class="pax">
    <option value="1">1 pax</option>
    <option value="2">2 pax</option>
    <option value="3">3 pax</option>
    <option value="4">4 pax</option>
    <option value="5">5 pax</option>
  </select>
</div>

Answer 2

Попробуйте это заменить ниже CSS:

input, select {
    width:80%;
    float: left;
}
select {
    width: 100px;float: left;

}