JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search_widget" class="search-widget" data-search-controller-url="//localhost/busqueda">
	<form method="get" action="//localhost/busqueda">
		<input name="controller" value="search" type="hidden">
		<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input name="s" value="" placeholder="Búsqueda en catálogo" aria-label="Buscar" class="ui-autocomplete-input" autocomplete="off" type="text">
		<button type="submit">
			<i class="material-icons search"></i>
      <span class="hidden-xl-down">Buscar</span>
		</button>
	</form>
</div>

CSS

#header .header-top .search-widget {
	position: relative;
	width: 56%;
	left: 12%;
	float: left;
	z-index: 999;
	min-width: inherit;
}
.search-widget form input[type="text"] {
	font: 15px 'Comfortaa',cursive;
	letter-spacing: .5px;
	border: none;
	border: 2px solid #e5e5e5;
	padding: .7rem 3rem .7rem 1.2rem;
	box-shadow: 0 3px 8px #E7E7E7 inset;
	-webkit-box-shadow: 0 3px 8px #E7E7E7 inset;
	-moz-box-shadow: 0 3px 8px #E7E7E7 inset;
	-ms-box-shadow: 0 3px 8px #E7E7E7 inset;
	-o-box-shadow: 0 3px 8px #E7E7E7 inset;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	-o-border-radius: 50px;
	border-radius: 50px;
}
.search-widget form input[type="text"]:focus {
	border: 2px solid #ddd;
	border-radius: 25px 25px 0 0;
	-webkit-border-radius: 25px 25px 0 0;
	-moz-border-radius: 25px 25px 0 0;
	-ms-border-radius: 25px 25px 0 0;
	-o-border-radius: 25px 25px 0 0;	
	outline:none;
}
.ui-corner-all{
	border-radius: 0 0 1rem 1rem;
}
.ui-widget-content{
	z-index: 999;
	border-top: 0 !important;
	border: 2px solid #ddd;
	padding: 1rem 0;
	width: 431px !important;
	top: 87px !important;
	box-shadow: 2px -6px 6px 0 #E7E7E7 inset, -2px -6px 6px 0 #E7E7E7 inset;
	-webkit-box-shadow: 2px -6px 6px 0 #E7E7E7 inset, -2px -6px 6px 0 #E7E7E7 inset;
	-moz-box-shadow: 2px -6px 6px 0 #E7E7E7 inset, -2px -6px 6px 0 #E7E7E7 inset;
	-ms-box-shadow: 2px -6px 6px 0 #E7E7E7 inset, -2px -6px 6px 0 #E7E7E7 inset;
	-o-box-shadow: 2px -6px 6px 0 #E7E7E7 inset, -2px -6px 6px 0 #E7E7E7 inset;
}
.ui-menu .ui-menu-item a {
    border-radius: 0 !important;
}
.ui-menu .ui-menu-item a:hover {
    border: 1px dotted #999;
}
.search-widget form button[type="submit"] {
	cursor: pointer;
	bottom: .6rem;
	right: .8rem;
}
.searchDescription {
float:right;
width: 75%;
margin-top: .5rem;
}
.searchProductname {
font: 16px/11px 'Comfortaa',cursive;
color: #111;
}
.searchPrice {
font: 16px/0 'Comfortaa',cursive;
color: red;
}