Checkbox floating upwards when adding button to html

I am using pretty checkbox library and have 3 repeating elements drawn inside a React app: checkbox, its label, and React-Bootstrap Button. When I add the Button, the checkbox floats above and I am having real trouble bringing it down, centering it horizontally:

The part of the code that is drawing the elements is the following one:

...
<Row>
        <Col xs={2} md={2}>
          {
            this.state.allExprData.length ?
            <div>
              <Label bsStyle="primary" style = >
                <Glyphicon glyph="check"/>  Selected Genes
              </Label>
              <p></p>
            </div>
            : ""
          }
          {
            this.state.allExprData.map((geneObj, idx) => {
               return (<div key={geneObj["name"]} className={"pretty p-default p-curve"}>
                 <input type="checkbox" onChange={this.onChangeCheckbox} defaultChecked/>
                   <div className={"state p-primary"}>
                      <label style=>{geneObj["name"]}</label>
                      <Button style= bsStyle="danger" bsSize="xsmall">
                        <Glyphicon glyph="remove-circle"/> Remove
                      </Button>
                  </div>
               </div>)
            })
          }
...

I tried applying different classes (text-center, center-block, pagination-centered, etc) the way it is described in the thread:

Twitter Bootstrap - how to center elements horizontally or vertically

But no luck. Any suggestions would be greatly appreciated.