JSFiddle - React, Tailwind, and code Playground

HTML

<div class="search-form">
    <label for="srch">Search</label>
    <input type="text" id="srch" required/>
</div>

CSS

.search-form input[type="text"] {
    width: 0 !important;
}
.search-form input[type="text"]:focus {
    width: 70% !important;
}
.search-form input[type="text"]:valid {
    width: 70% !important;
}