JSFiddle - React, Tailwind, and code Playground

by surendraVsingh

HTML

<div class="topsearch">
    <label for="field-topsearch">Search</label>
    <form action="https://www.etc.com/index.php?" method="get">
        <input type="hidden" name="p" value="catalog"/>
        <input type="hidden" name="mode" value="search"/>
        <input type="hidden" name="search_in" value="all"/>
        <span class="topsearchfield">
            <input id="field-topsearch" maxlength="256" type="text" name="search_str" value=""/>
        </span>
        <input type="submit" class="button-start-search submit " value="Go!"/>
    </form>
</div>

CSS

.topsearch
    {
    height: 40px;
    line-height: 35px;
    padding-right: 10px;
    width:100%;
    display:table;
    }

.topsearch label
    {
    color: #c98116;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 0.9em;
    margin: 0 5px;
    }

.topsearch label, .topsearch form
    {
    display: inline;
    } 

.topsearchfield
    {
    border: none;
    height: 24px;
    font-size: 15px;
    width: auto;
    } 
#field-topsearch{width:80%; display:inline-block;}
.button-start-search submit
    {
    display: table-cell;
    }