JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="wrap__item clearfix">
      <input placeholder="What are you looking for, dude?" class="wrap__input"></input>
      <button class="wrap__button">Find</button>
  </div>
</div>

CSS

* {
  box-sizing: border-box
}

.wrap {
  width: 100%;
  margin: 100px auto;
  border: 1px solid silver;
  padding: 24px;
}
.wrap__item input, .wrap__item button {
  padding: 10px;
}
.wrap__item input {
  float: left;
  width: calc(100% - 100px);
}
.wrap__item button {
  float: right;
  width: 100px;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}