将复选框输入和<p>标签对齐在同一行中

Question

我已经看到了使用标签解决此问题的大多数其他方法。不幸的是，我不能在这种特殊情况下使用标签，因为那样会使事情搞砸。我有以下内容：

<div className="terms-checkbox">
  <input type="checkbox" required />
  <p>I accept the Terms and Conditions</p>
</div>

我将terms-checkbox的显示设置为内联式，如下所示：

    .terms-checkbox {
      display: inline-block;
    }

但是，这不会使项目水平/在同一行中对齐。在不将input标签包裹在label的情况下，如何使复选框和p标签水平对齐？

以下是小提琴链接：https://jsfiddle.net/eu5rso2a/1/

编辑：固定缩进。

Answer 1

<p><input type="checkbox" required/>I accept the Terms and Conditions</p>

Answer 2

必须将terms-checkbox类设置为input或p标签。不是他们的父母。 表示您的input和p标签必须为inline-block