JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
</div>
<br>
<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Button</button>
  </span>
  <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Button</button>
  </span>
</div>

<br>
<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-outline-primary" type="button">Button</button>
  </span>
  <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-outline-primary" type="button">Button</button>
  </span>
</div>

SCSS

body {
  padding: 2rem;
}