JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container background-light m_top m_bottom">
  <div class="test div">
    <div class="menu">
      <ul class="menu-items">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
      </ul>
     
        <div class="menu-select">
          <span>Order by</span>
          <form>
          <select id="item-select">
            <option selected>
            Item 1
            </option>
            <option>
            Item 2
            </option>
            <option>
            Item 3
            </option>
          </select>

           </form>
        </div>
     
    </div>
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  outline: 0;
  border-radius: 0;
}

ul{
  list-style:none;
}

/*.test{display:flex;}*/


input,
select,
textarea,
button {
  padding: 15px;
  width: 100%;
}

select,
input,
button {
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.container {
  float: left;
  width: 100%;
}

.div {
  width: 92%;
  margin: 0px auto;
}


.menu{
    display: flex;
  align-items:center;
  justify-content:space-between;
  background-color: yellow; 
}
.menu-items{
  display: flex;
  align-items:center;
  flex-basis:40%;
}
.menu-select{
    display: flex;
  align-items:center;
  background-color: red;
    flex-basis:60%;
    align-items: center;
    justify-content: center;
}

#item-select {
  margin: 10px;
  width: 150%;
}

.menu-select select{
  border:1px solid gray;
}

.menu-items li{
  margin-right: 15px;
}

.menu-items a{
  padding: 10px;
}

.div-content{
  display:flex;
}