JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<div class="header-contact">
  
                        <select>
                            <option value="mts">МТС (099)100 10 10</option>
                            <option value="A">A</option>
                            <option value="Value B">Value B</option>
                        </select>
                        <a href="#">Хачу!</a>
</div>
<ul class="header-menu">
                        <li class="menu-item"><a class="menu-link" href="">О нас</a></li>
                        <li class="menu-item"><a class="menu-link" href="">Процесс и оплата</a></li>

                        <li class="menu-item"><a class="menu-link" href="">Блог</a></li>
                        <li class="menu-item"><a class="menu-link" href="">Контакты</a></li>
                    </ul>

CSS

body {
    font: 16px "Ubuntu", sans-serif;
    color: #222;    
}
*
{
    box-sizing: border-box;
}
.header-menu {
    display: block;

     font-size: 0 12px;
~    margin: 0 -12px;
    padding-left: 17px;
    vertical-align: middle;
    background-color: #4f5253;
    min-height: 33px;
}
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.header-menu .menu-item {
    display: inline-block;
~    width: 70px;
    
    margin: 0 4%;
    vertical-align: top;
}
.header-menu .menu-link {

    font-size: 12px;
    font-weight: 300;
    line-height: 31px;

    vertical-align: middle;
}
a {
        text-decoration: none;
        color: #fff;

}
.header-contact {
    clear: right;
    float: right;
    padding-right: 17px;

}
.header-contact > *
    {
      display: inline-block;
    }