JSFiddle - React, Tailwind, and code Playground

by Felipe Miosso

HTML

<div id="tag" class="inline-block">
        
</div><!--
--><p></p><input id="q" type="text" class="inline-block"><span class="inline-block"></span>

CSS

.inline-block {
display: inline-block;
vertical-align: top;
}

p { 
display: inline-block;
vertical-align: top;
    width:5px; 
    height:34px;
    margin:0;
    background-color:#BBD6AE;
}

#tag {
min-width: 80px;
height: 30px;
padding: 1px 5px;
background-color: #EEE;
border: 1px solid #BBB;
border-right: 0;
}

#q {
height: 30px;
min-width: 300px;
margin: 0;
outline: 0;
border: 1px solid #BBB;
border-left: 0;
}

span {
    width:30px;
    height:30px;
    padding:1px;
    border:1px solid #E36D6D;
    background-color:#E36D6D;
}