JSFiddle - React, Tailwind, and code Playground

by jasonkylefrank

HTML

<div class="wrapper">
    <input type="text" />
    <button>X</button>
</div>

CSS

.wrapper {
    border:1px solid #000;
    display:inline-block;
    position:relative;
    
    /*overflow: hidden;*/
}

input,
button {
    background-color:transparent;
    border:0;
}

button {
    cursor: pointer;
    position:absolute;
    right:0;
    top:0;
    
    font-size: .8em;
    transition:  all 0.1s ease;
}

button:hover {
    background-color: gray;
    font-size: 1.0em;
}

input {
    padding-right:30px; /* button padding */
}