无法将文本和复选框定位在同一行上

<label for="checkbox">文本</label>
<input type="checkbox" id="checkbox">

label, input[type="checkbox"] {
  display: inline-block;
  vertical-align: middle;
}

<div class="form-group">
  <label for="checkbox">文本</label>
  <div class="checkbox">
    <input type="checkbox" id="checkbox">
  </div>
</div>

<div class="container">
  <label for="checkbox">文本</label>
  <input type="checkbox" id="checkbox">
</div>

.container {
  display: flex;
  align-items: center;
}