Как мне расположить оба компонента в крайнем левом и правом и встраивать в реакцию?

Question

Как мне расположить оба компонента в крайнем левом и правом и встроенном в реакции? кнопка создания просто не может go встраиваться и вправо.

<div className="card-header">
    <div className="col-6">
        <h5>Products Category</h5>
    </div>
    <div className="btn-popup col-6 pull-right">
        <button type="button" className="btn btn-primary" onClick={this.onOpenModal} data-toggle="modal" data-original-title="test" data-target="#exampleModal">Create</button>
        <Modal open={open} onClose={this.onCloseModal} >
            <AddDiscount/>
        </Modal>
    </div>
</div>

Answer 1

Я просто исправил это, добавив строку

<div className="card-header">
  <div className="row">
    <div className="col-6">
      <h5>Discount</h5>
    </div>
    <div className=" btn-popup col-6 text-right">
      <button type="button" className="btn btn-primary" onClick={this.onOpenModal} data-toggle="modal" data-original-title="test" data-target="#exampleModal">Create</button>
    <Modal open={open} onClose={this.onCloseModal} >
      <AddDiscount/>
    </Modal>
  </div>
  </div>
</div>