Placing checkbox below input box (styling) - html

Question

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;
}
}
<div class="background">
<div class="inputBar">
<input class="enterText" id="inputBox" type="text" placeholder="Enter something" />
<button class="enterButton">Enter</button>
</div>
<div class="check">
<input class="checkBox" type="checkbox" defaultChecked/>
<span class="checkBoxText">Check this</span>
</div>
</div>

Answer 1

By default, flex sets direction to row.
You can set flex-direction: column to achieve what you want.
.container {
display: flex;
flex-direction: column;
}
<div class="container">
<div>
<input type="text" />
<button>Enter</button>
</div>
<div>
<input type="checkbox" id="check-this" />
<label for="check-this">Check this</label>
</div>
</div>