JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<p>On Desktop:</p>
<div class="root">
  <form class="form">
    <input class="input" placeholder="Search" />
    <button class="search" type="submit">
      Search
    </button>
  </form>
  <button class="filter" type="button">
    Filters
  </button>
</div>

<p>On Mobile:</p>
<div class="max-width">
  <div class="root">
  <form class="form">
    <input class="input" placeholder="Search" />
    <button class="search" type="submit">
      Search
    </button>
  </form>
  <button class="filter" type="button">
    Filters
  </button>
</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.root {
  display: flex;
  background: orange;
  font-size: 18px;
  font-family: serif;
}
.form {
  display: flex;
  flex-grow: 1;
}
.input {
  margin: 0;
  padding: 25px;
  border: 0;
  background: 0;
  flex-grow: 1;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
}
.search,
.filter {
  margin: 0;
  padding: 25px;
  border: 0;
  background: none;
  font-size: inherit;
  line-height: inherit;
}
.filter {
  border-left: 1px solid black;
}
.max-width {
  width: 320px;
}