I'm new to HTML and I have some questions regarding input tags. Here I have two inputs seperated by a span tag(-). What I want to do is to wrap two inputs like a single input like the image below. Do I need to add styles using css or change the whole structure of the code?

<div >
<label for="form-realname" >test*</label>
    <div >
        <input type="text"  placeholder="" />
        <span  >-</span>
        <input type="text"  placeholder=""  />
    </div>    

ideal structure

CodePudding user response：

Here is easy solution:

1. Set border for inputs to 0 to make them invisible.
2. Add border 1px with color you need to parent div.
3. Don't forget to make this parent div display: inline-block;

* {
  margin: 0;
  padding: 0;
}

input.form-control {
  border: 0;
  padding: 2px;
}

.input-group {
  border: 1px solid gray;
  display: inline-block;
}

<div >
    <label for="form-realname" >test*</label>
    <div >
        <input type="text"  placeholder="" />
        <span  >-</span>
        <input type="text"  placeholder=""  />
    </div>
</div>