CODEWITHSUNDEEP
htmlcssinput-field
Aaron Swartz
Aaron Swartz

Reputation: 31

multiple input field align in the same row

The default (with any style) for 2 input is already align in the same row, but I want the second field to be in fixed width and they are responsive. 

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>

Upvotes: 2

Views: 2123

Answers (2)

sanoj lawrence
sanoj lawrence

Reputation: 993

try this replace bellow css :

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

}

Upvotes: 0

SW4
SW4

Reputation: 71140

You mean, like the below? With the select being fixed width, you can then use calc to make the input take up the remaining space. box-sizing:border-box ensures sizing remains as anticipated.

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>

Upvotes: 2

Related Questions