JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<p>Con un div</p>
<div class="contiene_input">
    <input type="text" />
    <div>
        <span class="flecha-izq"><!-- flecha --></span>
    </div>
    
    <div class="texto">
    <div class="ccolor">
        <span class="flecha-izq f-dos"><!-- flecha --></span>
    </div>
    texto</div> 
</div>
 

</div>
</body>
</html>

CSS

.contiene_input{
padding: 0;
margin: 0;
border: none;   
height: 26px;
}
 
.contiene_input input{
float:left;
border: none;
background-color:#3A6411;
padding: 1px 2px 0px 2px;
margin: 0;
width: 200px;
height: 25px;
}
 
.contiene_input div{
float:left;
background-color:#3A6411;
padding: 0;
margin: 0;
height: 100%;
}
 
.flecha-izq {
  border-color: transparent white transparent transparent;
  border-style:solid;
  border-width:5px;
  margin-top: 7px;
  width:0;
  height:0;
  display: inline-block;
}
 
.ccolor {
background-color: #fff !important;
}
 
.f-dos {
border-color: transparent red transparent transparent !important;
margin-left: -18px;
clear: both;
}
 
div.texto {
margin-left:5px;
padding: 0 8px;
background-color: red;
}
 
 
div.texto:hover{
margin-left: -1px;
cursor: pointer;
z-index:2;
}