align the textbox in the center with icon close to textbox also - html

Question

<div class="card">
<div class="col-md-12">
<span style="margin-left:20px;">
<input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:left;"></span>
</span>
<i class="fa fa-long-arrow-left" style="font-size:36px;vertical-align:-19%;color:green"></i>
<span>
<input type="text" name="boxx" id="boxx" style="width:200px;">
</span>
<i class="fa fa-long-arrow-right" style="font-size:48px;color:green"></i>
<span style="margin-right:20px;">
<input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:right;">
</span>
</div>
</div>
i want to align the middle textbox in the center of the div and the icon should be close to the textbox.

Answer 1

You set the font size of the second < i > to 48 and caused this error. And I changed the bootstrap classes to a row with 3 cols 3-6-3. make sure that your bootstrap references were referenced well :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class ="row">
<div class="col-sm-3">
<span>
<input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:left;"></span>
</span>
<i class="fa fa-long-arrow-left" style="font-size:36px;color:green"></i>
</div>
<div class="col-sm-6">
<span>
<input type="text" name="boxx" id="boxx" style="width:200px;">
</span>
<i class="fa fa-long-arrow-right" style="color:green"></i>
</div>
<div class="col-sm-3">
<span>
<input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:right;">
</span>
</div>
</div>

Answer 2

You can use display: flex to center everything :
.col-md-12 {
display: flex;
align-items: center;
}
#input-left {
width:50px;
}
#input-center {
width:200px;
}
#input-right {
width:50px;
}
.middle-box {
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
.fa-long-arrow-left {
font-size:36px !important;
/*vertical-align:-19%;*/
color:green;
}
.fa-long-arrow-right {
font-size:48px !important;
color:green;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="col-md-12">
<span style="margin-left:20px;">
<input rows="4" cols="50" type="text" name="box" id="input-left"> </span>
<span class="middle-box">
<i class="fa fa-long-arrow-left"></i>
<span>
<input type="text" name="boxx" id="input-center">
</span>
<i class="fa fa-long-arrow-right"></i>
</span>
<span style="margin-right:20px;">
<input rows="4" cols="50" type="text" name="box" id="input-right">
</span>
</div>
</div>