Can someone help me fix this issue?
https://i.sstatic.net/RyGML.png
The span with the percent symbol is stretching to fit the input margin. How can I stop this from happening? I've already tried various CSS attributes but nothing seems to work in separating the span from inheriting the input's excessive margin.
This layout was created using Hubspot CMS and I'm trying to replicate the Bootstrap styling on my regular website.
Here is the code:
<div class="row">
<div class="col-sm-6">
<label for="monthly-traffic" class="control-label">Monthly traffic (unique visitors)</label>
<input class="form-control" type="number" name="monthly-traffic" id="monthly-traffic" class="form-control" placeholder="monthly traffic">
</div>
<div class="col-sm-6">
<label for="percent-us" class="control-label">Percent of traffic from US</label>
<div class="input-group">
<input id="percent-us-addon" class="form-control" type="number" name="percent-us" placeholder="US traffic percentage" aria-describedby="percent-us-addon">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
CSS styles used:
.col-sm-6 {
width: 50%;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.input-group {
border-left: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
position: relative;
display: table;
border-collapse: separate;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
vertical-align: middle;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
and
.input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: center;
background-color: #e2e2e2;
border: 1px solid #ccc;
border-radius: 4px;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
}