How to ensure the height of a span matches that of an adjacent input using CSS?

Other Questions HubSpot
1

I’m facing an issue with my CSS where the height of the span with the percent symbol does not align with the height of the input field next to it. The span is stretching to fit the margin of the input, which doesn’t look right. I have tried several CSS settings to fix this but I am unable to eliminate the extra margin that affects the span’s height. Below is the HTML structure I am using:

<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" placeholder="monthly traffic">
  </div>
  <div class="col-sm-6">
    <label for="percent-us" class="control-label">Percentage of traffic from US</label>
    <div class="input-group">
      <input id="percent-us-addon" class="form-control" type="number" name="percent-us" placeholder="percentage of US traffic">
      <span class="input-group-addon">%</span>
    </div>
  </div>
</div>

Also, here’s the CSS setup I have:

.col-sm-6 {
  width: 50%;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}

.input-group {
  display: table;
  position: relative;
}

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  color: #555;
  background-color: #e2e2e2;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: table-cell;
  vertical-align: middle;
}
2

Your input and span elements probably have different box-sizing properties. I ran into this same issue with Bootstrap input groups last year. Add box-sizing: border-box to both .form-control and .input-group-addon classes. Also make sure your .input-group .form-control has display: table-cell and vertical-align: middle to match the addon. You might need to set matching line-height too - I used line-height: 1.42857143 on both classes and it fixed the height mismatch completely.