JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
    <div id="container">
        <div id="top-background-left">&nbsp;</div>
        <div class="external">
            <div class="externalinner">
                <form id="form" name="form" method="post" action="action.html">
                    <p>Text1</p>
                    <input name="one" id="one" type="text" size="15" maxlength="10" />
                    <select name="no" size="1">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2" selected>2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                    <button type="submit">Go</button>
                </form>
            </div>
        </div>
        <div id="top-background-right">&nbsp;</div>
    </div>
</div>

CSS

#top{
    padding: 0px;
    z-index:12;
    position:fixed;
    top: 0px;
    left: 50%;
}

#container {
    background-color: #efa910;
    width: 1200px;
    height: 66px;
    position: absolute;
    top: 0px;
    left: -600px;
    line-height: 66px;    
}

.externalinner {
    text-align: center;
    line-height: 66px;
}

.externalinner p {
    display: inline;        
}

.external {
    position: absolute;
    top: 0px;
    left: 150px;
    width: 900px;
    background: #efa910;
    text-align:center;
}


#top-background-left {
    position: absolute;
    top: 0px;
    left: 0px;
    background: green;
    width: 150px;
    height: 66px;
}

#top-background-right {
    position: absolute;
    top: 0px;
    right: 0px;
    background: green;
    width: 150px;
    height: 66px;
}