How to align buttons in reactstrap?

Question

I am building a web application in react and using reactstrap for certain ui design elements. I have arranged elements in row and columns. Everything else works fine but the button element is not getting aligned properly like the other elements in the row are. The button is slightly below than the other elements. Can someone tell me what i am doing wrong? Any help would be appreciated. Thank You.

App.js

              <Container>
              <Row>
                <Col>
                  <text>{item1.Title}</text>
                </Col>
                <Col>
                  <input type="text" onChange={this.handleNameChange}/>
                </Col>
                <Col>
                  <Button onClick={()=>this.handleName(this.state.itemName,item1.Title,item.Title)} color="success" size="sm" >Save</Button>
                </Col>
              </Row>
              </Container>  

UPDATE

The button column seems to be having some sort of padding.

The textbox doesnt have any padding

Answer 1

give the 3rd Col a className and use the following css:

.class-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
}

.main-container {
    display: flex;
}

And you code:

<Container>
              <Row className="main-container">
                <Col className="class-col">
                  <text>{item1.Title}</text>
                </Col>
                <Col className="class-col">
                  <input type="text" onChange={this.handleNameChange}/>
                </Col>
                <Col className="class-col">
                  <Button onClick={()=>this.handleName(this.state.itemName,item1.Title,item.Title)} color="success" size="sm" >Save</Button>
                </Col>
              </Row>
              </Container> 

Give this a try.