JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://pcvector.net/engine/classes/min/index.php?charset=utf-8&amp;f=engine/classes/js/jqueryui.js,engine/classes/js/dle_js.js"></script>
<div class="mobil-text-headline">
	    <div class="menu-button"><img src="http://evgenieg.bget.ru/wp-content/themes/school13/img/menu.png"></div>
		<div class="mobil-search"><form role="search" method="get" id="searchform" action="http://evgenieg.bget.ru/">
	<input type="text" placeholder="Введите запрос..." value="" name="s" id="s"><input type="submit" id="searchsubmit" value="">
</form>

</div>
    </div>

CSS

.mobil-text-headline {
    display: block;
    white-space: nowrap;
    width: 100%;
    background: #b4906c;
    padding-bottom: 5px;
    height:38px;
}
.mobil-search {
    display: inline-block;
    width: 60%;
}
.menu-button {
    display: inline-block;
    float: left;
    padding: 10px;
}
#mobile-menu, #mobile-menu ul, #mobile-menu ul li, #mobile-menu ul li a {
    border: 0 none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    line-height: 1;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
#mobile-menu {
    color: #ffffff;
    font-family: Helvetica,Arial,sans-serif;
    width: 200px;
}
#mobile-menu ul ul {
    display: none;
}
#mobile-menu > ul > li > a {
    background: rgb(54,170,231); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(54,170,231,1) 0%, rgba(31,160,228,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(54,170,231,1)), color-stop(100%,rgba(31,160,228,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36aae7', endColorstr='#1fa0e4',GradientType=0 ); /* IE6-9 */
    border-left: 1px solid #1682ba;
    border-right: 1px solid #1682ba;
    border-top: 1px solid #1682ba;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
   ...

JavaScript

$('#menu-button').click(function() {
    $('#mobile-menu').toggleClass('visible');
});

$(document).ready(function () {
    $('#mobile-menu li.menu-item-has-children > a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp();
        }
    });
 
    $('#mobile-menu>ul>li.menu-item-has-children>a').append('<span class="holder"></span>');
});