title: How do i align right in bootstrap card header
body: <p>I have a bootstrap 4 card and I want to align the h3 and input-group beside each other. </p>
  
  <p>I've tried adding float-right to the input-group but it didn't work. I also tried make the h3 and input-group inline-block but it still doesn't work.
  P.S. I used inline style sheet.</p>
  
  <pre><code>&lt;div class="card-header"&gt;
      &lt;h3 class="card-title" style="inline-block"&gt;Product List&lt;/h3&gt;
      &lt;div class="input-group input-group-sm col-sm-3" style="inline-block"&gt;
      &lt;input type="text" class="form-control"&gt;
      &lt;div class="input-group-append"&gt;
          &lt;button class="btn btn-primary" type="button"&gt;&lt;i class="fas fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>