I need help aligning the input field box next to my label. Currently, there is a gap between the text (label) and the input field when clicking on Item#1 and Invoice Number. I want the input field to be directly next to the label. Can anyone assist me with this? Below is a link to a jsfiddle example:
https://jsfiddle.net/silosc/7amzvfL6/6/
Here is the code snippet:
<div class="accordion" id="accordion1">
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading" id="item1" onclick="changeIcon('item1')">
<p class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<i class="fa fa-angle-down" onclick="changeIcon('id')">
Item #1
</i>
</p>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneOne">
<i class="fa fa-angle-down">
Invoice number:
</i>
</a>
</div>
<div id="collapseOneOne" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
<div class="row">
<div class="col-sm-4">
<label>Tracking #:</label>
<input />
</div>
<div class="col-sm-4">
<label>From Street:</label>
<input />
</div>
<div class="col-sm-4">
<label> To Street:</label>
<input />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-4">
<label>Div. Code #:</label>
<input />
</div>
<div class="col-sm-4">
<label>Invoice #:</label>
<input />
</div>
<div class="col-sm-4">
<label> Bill Date:</label>
<input />
</div>
</div>
<br />
</div>
<Style>
.row label{
display: inline-block;
text-align: right;
float: left;
margin: 0 auto;
width: 210px;
}
.row input{
display: inline-block;
text-align: left;
float: right;
margin: 0 auto;
width: 210px;
}
.dropbtn {
background-color: orangered;
color: white;
padding: 16px;
font-size: 12px;
cursor: pointer;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.btn {
background-color: orangered;
color: white;
padding: 16px;
font-size: 20px;
cursor: pointer;
border: none;
border-radius: 16px;
}
.btn:hover {
background-color: #3e8e41;
color: white;
}
.accordion-heading a {
color: black;
font-weight: bold;
font-size: 25px;
}
.accordion-heading p {
font-weight: bold;
font-size: 25px;
}
.accordion-inner label {
font-size: 20px;
}
.commentbox {
align-content: center;
}
</Style>