html - CSS - 絶対に必要な場合にのみ div でテキストをラップする

Question

小さなポップアップ ウィンドウの横にテキストが表示されたチェックボックスがあります。

HTML:

<div class="box">
  <div class="checkbox-wrapper">
    <input type="checkbox" class="checkbox" />
    <p class="checkbox-label">Filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
  </div>
</div>

CSS:

.box {
  width: 80%;
  height: 100px;
  background-color: #d1d1d1;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

.checkbox-wrapper {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

.checkbox {
  display: inline-block;
}

.checkbox-label {
  display: inline-block;
  color: #2e2e2e;
  font-size: 15px;
  margin: auto;
  margin-left: 10px;
}

JSFiddle

問題は、私がそうしなけれ.checkbox-wrapperばならないのでwhite-space: nowrap;、ポップアップメニューから消えてしまうことです. ただし、 を削除するwhite-space: nowrap;と、テキストが折り返されるのが早すぎて、ポップアップ ウィンドウ内のすべてのスペースが占有されません。テキストがポップアップ div の幅の 100% に達した後にのみ折り返されるようにするにはどうすればよいですか?