Put two inputs to the same line

Issue

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>

Solution

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>

Answered By - Gangula