JSFiddle - React, Tailwind, and code Playground

by coderatchet

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="input-with-icon">
  <input type="text" class="form-control" value="thing">
  <div class="btn btn-default icon"><span class="glyphicon glyphicon-search"></span>
  </div>
</div>

CSS

html {
  /* to make rem sizes behave */
  font-size: 10px;
}

.input-with-icon {
  /* causes absolute icon div to be positioned correctly */
  position: relative;
  
  width: 25rem;
  height: 3.2rem;
  box-sizing: border-box;
}

.input-with-icon .form-control {
    height: 100%;
    width: 100%;
    padding-right: 3.65rem;
    box-sizing: border-box;
}

.input-with-icon .icon {
  position: absolute;
  
  /* These are set relative to the height of the input box to bound the box neatly inside. This is aesthetic to me but you may change the dimensions of course. */
  right: 0.3rem;
  top: 0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.3rem;
  
  /* content in the icon div is centered, without bootstrap or font-awesome you may wish to add your own text in the span */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* 
 BELOW PROPERTIES AREN'T CRITICAL FOR DESIRED BEHAVIOUR.
 THEY ARE PURELY FOR DEMONSTRATION PURPOSES
*/
.input-with-icon {
  margin: 0.8rem;
}

.input-with-icon .form-control {
  padding-left: 1.2rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.input-with-icon .icon {
  border: 1px solid black;
}