.options {
  display         : flex;
  justify-content : space-between;
  border          : 2px solid black;
  align-items     : center;
  }

这样，每个选项的输入框将位于文本的右侧。通过更改元素的宽度或添加填充或边距，您可以更改文本和输入框之间的距离。

#options-div {
 display: flex;
 justify-content: space-between;
 align-items: center; /* This line is optional and can be used to 
 vertically center the items */
 border: 2px solid black;
}

body {
  background-color : #6d6875;
  font-family      : 'Open Sans', sans-serif;
  }
#options-div {
  display: flex;
  justify-content: space-between;
  align-items: center; /* This line is optional and can be used to 
  vertically center the items */
  border: 2px solid black;
  }
#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>

试着去做：将<p>更改为<label>，并在display: flex中添加justify-content: space-between和align-items: center。
在这种情况下，align-items将对齐行center中的内容。

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 {
  width           : 100%;
  min-height      : 30px;
  display         : flex;
  align-items     : center;
  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">
    <label>Password length</label>
    <input id="num-box" type="number">
  </div>
  <div class="options">
    <label>Include uppercase letters</label>
    <input type="checkbox">
  </div>
</div>

希望我帮到你了！