title: ASP.NET MVC: Align checkbox and label on same line
body: <p>The label ("Acid-stable amino acids") and checkbox are on different lines in my ASP.NET Core MVC application. (Sample ID is irrelevant here.) I would like them to be on the same line. Current misaligned output:</p>
  
  <p><a href="https://i.stack.imgur.com/M2zxy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M2zxy.png" alt="misaligned checkbox"></a></p>
  
  <p>The field from the model:</p>
  
  <pre><code>[Display(Name = "Acid-stable amino acids")]
          public bool AcidStables { get; set; }
  </code></pre>
  
  <p>The Razor view (removing most other irrelevant elements):</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;form asp-action="Create"&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label asp-for="ClientSampleID" class="control-label"&gt;&lt;/label&gt;
                  &lt;input asp-for="ClientSampleID" class="form-control" /&gt;
                  &lt;span asp-validation-for="ClientSampleID" class="text-danger"&gt;&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div class="checkbox"&gt;
                  &lt;label asp-for="AcidStables" class="control-label"&gt;&lt;/label&gt;
                  &lt;input asp-for="AcidStables" class="form-control"/&gt;
                  &lt;span asp-validation-for="AcidStables" class="text-danger"&gt;&lt;/span&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>I've tried a few things recommended in similar questions. Using inline-block display right before the label:</p>
  
  <pre><code>&lt;div class="checkbox"&gt;
                  &lt;style type="text/css"&gt;
                      label {
                          display: inline-block;
                      }
  
                  &lt;/style&gt;
  </code></pre>
  
  <p>Or modifying the label or checkbox types in the site.css file:</p>
  
  <pre><code>.label {
      display: inline;
      font-size: 1.2em;
      font-weight: 600;
      padding: 5px;
  }
  
  input[type=checkbox] {
      float: left;
      margin-right: 0.4em;
  }
  </code></pre>
  
  <p>or</p>
  
  <pre><code>​input[type=checkbox] + label {
      display: inline-block;
      margin-left: 0.5em;
      margin-right: 2em;
      line-height: 1em;
  }
  </code></pre>
  
  <p>I've tried changing  to "form-horizontal".</p>
  
  <p>Nothing changes the alignment of checkbox and label. Any input would be appreciated. Floating the checkbox may be a solution but I'm not sure how to do that. Relevant SO questions: <a href="https://stackoverflow.com/questions/22716968/put-checkbox-and-label-on-the-same-line-mvc">here</a>, <a href="https://stackoverflow.com/questions/37166501/asp-net-checkbox-cant-get-label-on-same-line-as-checkbox">here</a>, <a href="https://stackoverflow.com/questions/13212737/align-checkbox-and-label">here</a>.</p>
  
  <p>edit: rendered HTML--
  <a href="https://i.stack.imgur.com/PhyHh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PhyHh.png" alt="rendered html"></a></p>