JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input__group">
  <input type="text" class="input__element" />
  <input type="submit" class="input__submit" />
</div>

CSS

.input__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.input__submit {
  margin-bottom: 0;
  display: inline;
  width: auto;
}

.input__element {
  margin-right: 10px;
  width: 100%;
  -webkit-flex: 1;
  flex: 1;
}

@media only screen and (max-width: 300px) {
    .input__group {
      display: block;
    }
  .input__element {
    flex: auto;
  }
  
  .input__submit,
  .input__element {
    display: block;
    width: 100%;
  }
}