Put two inputs to the same line

user_18215856 0
Viewed 83

I would like to put two input to the same line.

I know that I could use float: left, but I have heard that, not recommended the usage of float.

I have tried display: inline-block; but this is not working.

.d-input {
  display: inline-block;
}

.resize {
  overflow: hidden;
  resize: horizontal;
  display: inline-block;
}

.resize input {
  width: 100%;
  box-sizing: border-box;
}
<div class="d-input">
  <span class="resize">
    <input type="text"/>
  </span>
  <input type="submit" value="click" class="sub"/>
</div>

css html
4 Answers

I think you're looking for display: flex. Check-out the below code

.d-input {
  display: flex;
  gap: 10px;
}

.resize {
  overflow: hidden;
  resize: horizontal;
  display: inline-block;
}

.resize input {
  width: 100%;
  box-sizing: border-box;
}
<div class="d-input">
  <span class="resize">
    <input type="text"/>
  </span>
  <input type="submit" value="click" class="sub" />
</div>

user_69082820

Another solution apart from flex would be to add vertical-align: top; on your input[type=submit].

.d-input {
  display: inline-block;
}

.resize {
  overflow: hidden;
  resize: horizontal;
  display: inline-block;
}

.resize input {
  width: 100%;
  box-sizing: border-box;
}

input[type=submit] {
  vertical-align: top;
}
<div class="d-input">
  <span class="resize">
    <input type="text"/>
  </span>
  <input type="submit" value="click" class="sub"/>
</div>

user_164963570

You could put the display: inline-block; statement on the input declaration instead

.d-input {
  display: inline-block;
}

.resize {
  overflow: hidden;
  resize: horizontal;
}

.resize input {
  box-sizing: border-box;
  display: inline-block;
}

or in the case you want two resizable inputs, keep your original CSS, but use this HTML

<div class="d-input">
    <span class="resize">
        <input type="text"/>
    </span>
    <span class="resize">
        <input type="text"/>
    </span>
    <input type="submit" value="click" class="sub"/>
</div>
user_4829010

you are working too hard! Just get rid of everything you don't need

input {
  overflow: hidden;  
  display: inline-block;
  box-sizing: border-box;
}
  
    <input type="text"/>
    <input type="submit" value="click" class="sub"/>

user_43989660
Related