如何在同一条线上对齐两个输入 class？

Question

I want to align two input classes next to each other with some space in between them like the following image. enter image description here

However, my current output is like this: enter image description here

The html code is

<div class="form-group">
    <div class="row">
        <label  for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label>
        <div id="box" class="col-sm-8 col-xs-8">
            <input type="text" class="form-control" name="workphoneNumber" placeholder="enter">
            <input type="button" class="btn btn-success" value="add" onclick="add_textbox()">
        </div>
    </div>
</div>

Answer 1

Just add width and margin

style="margin-right:5px;width:80%;float:left"

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> <div class="form-group"> <div class="row"> <label for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label> <div id="box" class="col-sm-8 col-xs-8"> <input style="margin-right:5px;width:80%;float:left" type="text" class="form-control" name="workphoneNumber" placeholder="enter"> <input style="width:15%;float:left" type="button" class="btn btn-success" value="add" onclick="add_textbox()"> </div> </div> </div>

Answer 2

You can also use display: inline-block instead of float .

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> <div class="form-group"> <div class="row"> <label for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label> <div id="box" class="col-sm-8 col-xs-8"> <input style="margin-right:5px;width:80%;display:inline-block;vertical-align:top" type="text" class="form-control" name="workphoneNumber" placeholder="enter"> <input style="width:15%;display:inline-block" type="button" class="btn btn-success" value="add" onclick="add_textbox()"> </div> </div> </div>

Answer 3

I suggest you to avloid inline styling and use bootstrap classes for good practices

input