Currently, the input="number" is in the top right hand corner of the flexbox. When I change it from input="number" to input="checkbox" it becomes aligned. How do I make it so that when it is input="number" it aligns with the rest of the checkboxes?
body {
background-color : #6d6875;
font-family : 'Open Sans', sans-serif;
}
#options-div {
background-color : #b5838d;
margin : 200px auto;
padding : 20px;
width : 350px;
text-align : center;
border : 2px solid white;
}
#password-output {
width : 200px;
}
#num-box {
width : 30px;
height : 30px;
}
.options {
display : flex;
justify-content : space-between;
border : 2px solid black;
}<div id="options-div">
<h1>Password generator</h1>
<input id="password-output" type="number">
<div class="options">
<p>Password length</p>
<input id="num-box" type="number">
</div>
<div class="options">
<p>Include uppercase letters</p>
<input type="checkbox">
</div>
</div>>Solution :
.options {
display : flex;
justify-content : space-between;
border : 2px solid black;
align-items : center;
}