title: align a text to right with ellipsis and button (react-js)
body: <p>I have a scenario, where on the header I have to display a button on the header right corner. The selected filter value should display next to the filter button as shown below.
  |     Between 01/23/2018 and 07/30/2018 {button}|</p>
  
  <p>when the user changes the screen size, I need to add the ellipsis to text and the button should be displayed as is.
  |Between 01/23/2018 and 07/3... {button}|</p>
  
  <p>I am not able to achieve this with the following css:</p>
  
  <pre><code>:local{
    .smallIcon {
      height: 1em;
      width: 1em;
    }
    .textOverflow {
      overflow: hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }
  }
  </code></pre>
  
  <p>The code is as below:</p>
  
  <pre><code>import Header from 'terra-clinical-header';
  import styles from './style.scss';
  import Text from 'terra-text';
  import Button from 'terra-button';
  import IconFunnel from 'terra-icon/lib/icon/IconFunnel';
  
  const newHeader = (props) =&gt; {
    const filterText = "Between 01/23/2018 and 07/30/2018,"
    return (
         &lt;Header
            isSubheader
            title={&lt;Text className={styles.textOverflow} color="black" fontSize={12} weight={400}&gt;{filterText}&lt;/Text&gt;}
            endContent={
              &lt;Button
                isIconOnly
                icon={&lt;IconFunnel className={styles.smallIcon} /&gt;}
                variant="action"
                type="button"
              /&gt;
            }
          /&gt;);
  }
  </code></pre>
  
  <p>With the above style, I am able to get ellipsis, but the text will display left side.</p>