JSFiddle - React, Tailwind, and code Playground

HTML

<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>
          <i class="fa fa-caret-down" aria-hidden="true"></i>
          <form>
          <select>
            <option selected>Item 1</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%;
}

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

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

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

.div-content{
  display:flex;
}