title: How do I make a <label> stay on the same line as it's <form>
body: <p>I haven't been able to figure out how to implement their tips into my styling. How can I get my label to be on the left of my input, on the same line? Also I'm just learning how to code so sorry for the inevitable sloppy-ness. This is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #f5f5f5;
    ;
  }
  
  .rng_box {
    background-color: white;
    width: 70%;
    max-width: 800px;
    left: 50%;
    top: 460px;
    border-radius: 20px;
    padding: 20px;
    position: absolute;
    transform: translate(-50%, -50%);
    box-shadow: 0px 2px 6px 2px #E5E5E5;
    border: solid 3px #DEDEDE;
  }
  
  .title {
    text-align: center;
  }
  
  .form-control {
    width: 180px;
    height: 30px;
    margin-left: 45px;
  }
  
  .btn {
    margin: 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"&gt;
  
  &lt;div class="rng_box"&gt;
    &lt;h1 class="title"&gt;Random Number Generator&lt;/h1&gt;
    &lt;div&gt;
      &lt;form id="minAndMax"&gt;
        &lt;label for="min"&gt;Minimum:&lt;/label&gt;&lt;br&gt;
        &lt;input type="number" id="min" name="min" class="form-control" value="1"&gt;
        &lt;label for="max"&gt;Maximum:&lt;/label&gt;&lt;br&gt;
        &lt;input type="number" id="max" name="max" class="form-control" value="10"&gt;
        &lt;br&gt;
        &lt;div class="buttons"&gt;
          &lt;button type="button" class="btn btn-success" onclick="generateRN()"&gt;Generate &amp;#x1F389;&lt;/button&gt;
          &lt;button type="button" class="btn btn-danger" onclick="ignoreFields()"&gt;Ignore Fields&lt;/button&gt;
          &lt;button type="reset" class="btn btn-primary"&gt;Clear&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;h1 id="rng_answer"&gt;0&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>