JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/420c815097.js"></script>
<div class="input-group">
<input type="text" class="form-control" id="copy-text" >
      <span>
        <i class="fa fa-times xicon over" aria-hidden="true"></i>
      </span>
      <span class="input-group-btn">

        <button id="copy-emoji" data-clear-btn="true" class="form-control btn-large btn-lg btn btn-success" type="button" onclick="copyall()">COPY</button>

      </span>
    </div>

CSS

.xicon.over {
    position: relative;
    top: 11px;
    left: -24px;
    width: 0;
    z-index: 999;
    cursor: pointer;
}