JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="indexBody">
  <div id="mainContainer" class="container-fluid">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div id="appBody" class="row app-body">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div>
              <div class="input-group captcha-div">
                <input oncopy="return false;" disabled="disabled" type="text" class="form-control form-control-manual captcha-field" id="mainCaptcha">

                <input class="form-control captcha-inpt" type="text" id="txtInput" name="captcha" onpaste="return false;" />

                <span class="input-group-btn refresh-icon">
                                        <button id="refresh" onclick="Captcha();" class="btn btn-default refresh-btn" type="button">
                                            <span class="glyphicon glyphicon-refresh"></span>
                </button>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

.captcha-div {
  margin-bottom: 28px !important;
}

.captcha-field {
  margin-bottom: 15px !important;
  border-radius: 8px !important;
}

.captcha-inpt {
  border-radius: 8px !important;
  height: 40px !important;
}

.refresh-icon {
  display: block !important;
}

.refresh-btn {
  margin-left: 15px !important;
  height: 40px !important;
  border-radius: 8px !important;
}