JSFiddle - React, Tailwind, and code Playground

HTML

<input type="search" value="I'm ok" />
<input type="search" id="withPadding" value="I'm cutoff" />

CSS

input {
    float: left;
    clear: both;
    margin: 1em;
}
input[type="search"] {
    -webkit-appearance: none;
}
#withPadding {
    padding: 0.7em;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="search"] {
        position:relative;
    }
    ::-webkit-search-cancel-button {
        position:absolute;
        right: 0px;
    }
}