Placing checkbox below input box (styling)

I am trying to place a checkbox below a text input box, but my InputBar is not occupying the full parent width and checkbox is appearing at the end of InputBar. I am a front-end newbea, can someone suggest what can I change to place the checkbox under the input bar.

My styling code

.background {
    background-image: url("../Back.jpg");
    background-repeat: no-repeat;
    margin: -11px -16px 0 -16px;
    background-size: 100%;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inputBar {
    padding-left: 30%;
    width: 100%;

    .enterButton {
        background: url("../arrowNext.svg") no-repeat center white;
        height: 50px;
        width: 35px;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
        vertical-align: top;
    }
    
        
    .enterText { 
            color: $primary-text-color-light;
            width: 60%;
            height: 50px;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            display: inline-block;
            vertical-align: top;
            padding-left: 2%;
    }
}  

.check { 
    display: inline-block;

    .checkBox { 
        width: 40px;
        height: 20px;
        background: #555;
        margin: 5px;
        border-radius: 3px;
        padding-left: 30%;
    }
    
    .checkBoxText { 
        font-weight: bold;
        font-size: larger;
        color: grey;
        background-color: whitesmoke;
    }
}

component code

<div className={background}>
     <div className={inputBar}>
          <input className={enterText} id="inputBox" type="text" placeholder="Enter something" onChange={event => this.updateEnteredText(event)}/>
          <button className={enterButton} onClick={this.openResults}></button>
     </div>
     <div className={check}>
           <input className={checkBox} type="checkbox" onChange={this.handleCheck} defaultChecked={this.state.checked}/>
           <span className={checkBoxText}>Check this</span>
     </div>
</div>