html - 在添加的选项旁边放置复选框

现在，我在html中使用的代码是：

<label name="diet" for="">Dieet:</label>
  @foreach($diets as $diet)
      <p> {{ $diet->titel }} </p>

      <input type="checkbox" id="diet[]" for="diet[]" name="diet[]" value="{{ $diet->id }}" class="dieet{{ $diet->id }}">

在CSS中，代码为

#form_new_recipe


    {
        margin: 0 auto;
        max-width:min-content;
        color: white;

        label{
            display: block;
        }

        input, textarea{
        margin-top:20px;
        margin-bottom:20px;
        display: block;
        }

        input[type="text"], textarea{
            margin-top:20px;
            margin-bottom:20px;
            display: block;
            width: 600px;
        }
    }

所以我的问题是：如何在添加的选项旁边看到我的复选框？ （与后端开发人员合作）

还有一些可能更难的事情，我想将添加的选项水平对齐（在一定程度上）

最佳答案

<label name="diet" for="">Dieet:</label>
  @foreach($diets as $diet)
<label><input type="checkbox" id="diet[]" for="diet[]" name="diet[]" value="{{ $diet->id }}" class="dieet{{ $diet->id }}">{{$diet->titel}}</label>

你是说那样吗在输入旁边显示标签（也可以点击）