JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<div class="input-group input-group-sm">
  <span class="input-group-addon">and yet another length</span>
  <input type="text" class="form-control" id="current_pwd" name="current_pwd" tabindex="0"/>
</div>
<div class="input-group input-group-sm">
  <span class="input-group-addon ">another length</span>
  <input type="text" class="form-control" id="new_pwd" name="new_pwd" tabindex="0"/>
</div>
<div class="input-group input-group-sm">
  <span class="input-group-addon">length_1</span>
  <input type="text" class="form-control" id="confirm_pwd" name="confirm_pwd" tabindex="0" aria-label="confirm passowrd"/>
</div>

CSS

.input-group {
    width: 100%;
    margin-top: 3px;
    line-height: 10px;
    /*text-size-adjust: 50%;*/
    font-size: 12pt;
}
.input-group-sm > input.form-control {
    width: 100%;
    padding: 4px 8px;
    line-height: 10px;
    font-size: 12px;
    height: 28px;
}
.input-group-addon { 
  width: 170px; 
  min-width:170px;
  text-align:left;
  white-space: nowrap;
  padding: 4px 8px;
  font-size: 10pt;
  line-height: 10px;
}

JavaScript

//input-group-sm