JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<div class="pure-g">
  <div class="pure-u-1">
    <form class="pure-form">
      <fieldset>
        <input type="text" class="pure-input-1-2" /><button type="submit" class="pure-button pure-button-primary"><span></span></button>
      </fieldset>
    </form>
  </div>
</div>

CSS

input {
  font-size: 16px;
  padding-right: 50px;
  border-radius: 0px;
  height: 30px;
}

.pure-button {
  margin-left: -45px;
  height: 30px;
  width: 40px;
  padding: 1px;
}

span {
  cursor: pointer;
  display: inline-block;
  height: 11px;
  width: 8px;
  text-align: center;
  white-space: nowrap;
  align-self: flex-start;
  background: red;
  background-position: 0 0;
  margin: 1px;
}

input, button { 
   display: inline-block !important;
   margin: 0 !important;
}