<ul class="group">
  <li>
    <input class="form-control height-30" type="text" value="Input element">
  </li>
  
  <li>
    <button class="btn height-30">Button</button>
  </li>
</ul>

<ul class="group">
  <li>
    <input class="form-control height-40" type="text" value="Input element">
  </li>
  
  <li>
    <button class="btn height-40">Button</button>
  </li>
</ul>

<ul class="group">
  <li>
    <input class="form-control height-50" type="text" value="Input element">
  </li>
  
  <li>
    <button class="btn height-50">Button</button>
  </li>
</ul>
// height utility classes
.height-30, .height-40, .height-50 {
  height: var(--height);

  &.btn, &.form-control {
    line-height: var(--height);
    padding-top: 0;
    padding-bottom: 0;
  }
}

.height-30 {
  --height: 30px;
}

.height-40 {
  --height: 40px;
}

.height-50 {
  --height: 50px;
}
View Compiled

External CSS

  1. https://codepen.io/codyhouse/pen/ZEWQemV

External JavaScript

This Pen doesn't use any external JavaScript resources.