title: React Bootstrap 4 Align Items in Header
body: <p>I am using react bootstrap v1.0.0-beta.5 which uses bootstrap 4. </p>
  
  <p>I am trying to create a header that aligns text on one side and an ellipsis on the other that will drop down actions when you click it. </p>
  
  <p>I have attemped to use </p>
  
  <p><code>&lt;FaEllipsisH className="justify-content-end"/&gt;</code></p>
  
  <p>What should I be doing?</p>
  
  <pre><code>   &lt;Card style={{ width: '22rem' }} className="pCard" border="dark"&gt;
       &lt;Card.Header&gt;
         &lt;FaAmazon/&gt; {product.content}
         &lt;FaEllipsisH className="justify-content-end"/&gt;
       &lt;/Card.Header&gt;
       &lt;Card.Body&gt;
         &lt;Card.Title&gt; &lt;FaFileInvoice/&gt; &lt;span className="Home orderNo"&gt;&lt;a href={`/products/${product.productId}`}&gt;{product.productId}&lt;/a&gt;&lt;/span&gt;&lt;/Card.Title&gt;
         &lt;Card.Text&gt;Item&lt;/Card.Text&gt;
        &lt;/Card.Body&gt;
      &lt;/Card&gt;
  </code></pre>
  
  <p>Associated CSS</p>
  
  <pre><code>.Home .pCard {
    font-size: 0.8em;
    margin-bottom: 10px;
    margin-top: 5px;
    display: flex;
  }
  </code></pre>