JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Right">
        <div class="header-search">
            <input type="text" class="searchbox" />
            <input type="button" class="searchbutton" value="›" />
        </div>
    </div>

CSS

div.Right {
    border: 01px dashed green;
    height:95px !important;
    position: relative;
}   

div.header-search {
    border:1px dashed blue;
    position: absolute;
    top: 30px;
    right: 0;
}

div.header-search input.searchbox {
    border-bottom-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -moz-border-bottom-left-radius:5px;
    border-top-left-radius:5px;  
    -webkit-top-left-radius:5px;
    -moz-left-radius:5px;
     border:2px solid #316200;
     background-color:white;
     height:16px;
     padding:4px;
     padding-left:28px;
     padding-right:10px;
     color:#4a4a4a;
     float:left;
     background:white url(../images/SearchImage.png) 0 50%  no-repeat;
}

div.header-search input.searchbutton {
  border-bottom-right-radius:5px;
  -webkit-border-bottom-right-radius:5px;
  -moz-border-bottom-right-radius:5px;
   border-top-right-radius:5px;  
   -webkit-top-right-radius:5px;
   -moz-right-radius:5px;
   background:#458A00;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A5D376', endColorstr='#326400'); /* for IE */
   background: -webkit-gradient(linear, left top, left bottom, from(#A5D376), to(#326400)); /* for webkit browsers */
   background: -moz-linear-gradient(top,  #A5D376,  #326400); /* for firefox 3.6+ */  
  width:50px;
  height:28px;
  color:White;
  font-size:16px;
  font-weight:bold ;
  border:2px solid #316200;
  border-left:none;
}