JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<div id="top-nav-container">

  <div id="top-nav">
    <div id="col-1">
      <a href="#!" id="logo">
        <img src="http://placehold.it/300x80" alt="">
      </a>
    </div>
    <div id="col-2">
      <div class="form-group">
        <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
      </div>
    </div>
    <div id="col-3">
      <button type="button" class="btn btn-outline-light">Light</button>
      <button type="button" class="btn btn-outline-light">Light</button>
    </div>
  </div>

</div>

SCSS

html,
body {
  margin: 0;
  padding: 0;
}

#top-nav-container {
  background-color: #3E7BB8;
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
}
#top-nav  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  > * {
    outline: 1px dotted orange;
    padding: 0.25em;
  }
  #col-1,
  #col-2,
  #col-3 {
    display: flex;
    align-items: center;
    flex-grow: 1;
    flex-basis: 30%;
    margin-right: 1em;
    box-sizing: border-box;
    &:last-of-type {
      margin-right: 0;
    }
    input, select, .form-group {margin: 0;}
  }
  #col-1 {
    img {
      display: block;
    }
  }
  #col-2 {
    .form-group {
      min-width: 300px;
    }
    justify-content: center;
  }
  #col-3 {
    .btn {
      margin-right: 1em;
      &:last-of-type {margin-right: 0;}
    }
    display: flex;
    justify-content: flex-end;
  }
  @media only screen and (max-width: 1200px) {
    flex-wrap: wrap;
    #col-1, #col-3 {
      flex-basis: (320px/2);
      flex-shrink: 0;
    }
    #col-2 {
      order: 99;
      flex-basis: 100%;
      flex-grow: 1;
      .form-group {
        width: 100%;
      }
    }
    #col-3 {}
  }
}