Как переместить две кнопки, одну влево, а другую вправо, в одну строку?

Question

У меня проблемы с размещением двух кнопок в div. Я хочу, чтобы кнопка твита была слева, а другая кнопка «Следующая цитата» - справа. Я пытался переместить кнопку Next-Quote с абсолютной позицией, но когда я пытаюсь переместить ее вправо, она перемещается только наполовину, а не полностью. Я также пытался плавать вправо, а также тянуть-вправо, он все еще не работает. Я не знаю, как это сделать. Помощь ...

<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;
}

Answer 1

Это сработало для меня:

HTML:

<div class="left-btn">
    <button class="btn"></button>
</div>
<div class="right-btn">
    <button class="btn"></button>
</div>

CSS:

.left-btn { float: left; }
.right-btn { float: right; }

Answer 2

Попробуйте так. Это просто. Но это работает

<ul class="main-nav">
    <li class=""><a href="index.php" class="logo"><img src="images/logo.svg" alt=""></a>
    </li>

    <div class="">
        <li><a href="index.php" class="menu" data-wow-duration="1s" data-wow-delay="0.2">Home</a>
        </li>

    </div>
</ul>

.main-nav {
display: flex;
}

.main-nav li:first-child {
margin-right: auto;
z-index: 3;

}

Answer 3

Сначала оберните каждую кнопку в div:

<div className="buttons-toolbar">
    <div className="left-group">
        <button className="twitter-btn">Tweet</button>
    </div>
    <div className="right-group">
        <button className="btn-primary">Next Quote</button>
    </div>
</div>

Затем добавьте CSS для управления содержимым этих элементов:

.btn-toolbar {
    display: flex;
    justify-content: space-between;
}

.left-group {
    display: flex;
    flex: 1;
    justify-content: flex-start;
}

.right-group {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}