Put two inputs to the same line-CodePudding

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 >
  <span >
    <input type="text"/>
  </span>
  <input type="submit" value="click" />
</div>

CodePudding user response：

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 >
  <span >
    <input type="text"/>
  </span>
  <input type="submit" value="click"  />
</div>

CodePudding user response：

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 >
  <span >
    <input type="text"/>
  </span>
  <input type="submit" value="click" />
</div>

CodePudding user response：

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" />

CodePudding user response：

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 >
    <span >
        <input type="text"/>
    </span>
    <span >
        <input type="text"/>
    </span>
    <input type="submit" value="click" />
</div>