JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search_combo">
    <div id="icon-left"><img id="s-img" src="http://c.dryicons.com/images/icon_sets/symbolize_icons_set/png/128x128/search.png" width="16px" height="16px"/>&#x25BC; </div>
    <input type="text" name="search" id="search"/>
    <div id="icon-right"><img id="s-img" src="http://cdn3.iconfinder.com/data/icons/glyph/227/Cancel-128.png" width="16px" height="16px"/></div>
</div>

CSS

#search{
    border: 0 none;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #666666;
    height: 25px;
}

#search:focus {
    outline-width: 0;
}

#icon-left{
    font-size: 10px;
    color: #666666;
    
    display: inline;
    position: relative;
    right: -2px;
    padding: 8px 0px 6px 6px;
    border: 1px solid #666666;
    border-right: 0 none;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    
    cursor: pointer;
}

#icon-right{    
    display: inline;
    position: relative;
    left: -6px;
    padding: 4px 6px 5px 0;
    border: 1px solid #666666;
    border-left: 0 none;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    
    cursor: pointer;
}
@-moz-document url-prefix() { 
  #icon-left{
     padding-top: 10px;
  }
   #icon-right{
     padding-top: 6px;
  }
}

#s-img{
    position: relative;
    top: 3px;
}

JavaScript

$(document).ready(function(){
    $("#icon-left").click(function(){
        alert("clicked search icon");
    });
    
    $("#icon-right").click(function(){
        alert("clicked cancel icon");
    });
});