I can't seem to figure out how to position two buttons within this div. My goal is to have the tweet button on the left and the "Next Quote" button on the right. I've attempted to use position absolute to move the Next-Quote button to the right, but it only moves halfway. I've also tried float right and pull-right without success. I'm stuck and could really use some guidance...
<div className="container col-md-6 col-sm-offset-3">
<div id="quote-box">
<h4 id="text" className="text-md-center"> {this.props.quote.quote}</h4>
<p id="author" className="text-md-right">- {this.props.quote.author}</p>
<div className="buttons btn-toolbar">
<a
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
className="twitter-btn twitter-share-button"
data-size="large"
data-show-count="false"
>Tweet
</a>
<button
id="new-quote"
className="btn btn-primary btn-xs pull-right"
onClick={this.onClick.bind(this)}
>Next Quote
</button>
</div>
</div>
</div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
#quote-box {
padding: 20px;
border-radius: 10px;
background-color: red;
}
.btn-toolbar {
display: flex;
justify-content: space-between;
}
#new-quote {
font-size: 13.5px;
padding: 3px;
}