title: How can I put the label and the input on the same line please?
body: <p>How can I put the label and the input on the same line please? <strong>I would like to get please a spacing of 1,5cm between the label and input also.</strong></p>
  <p>By searching <a href="https://stackoverflow.com/questions/39277144/how-to-put-label-and-input-box-on-the-same-line-using-bootstrap">here</a> I have to use <code>form-inline</code> but it doesn't work for put the label and input on the same line.</p>
  <p><a href="https://i.stack.imgur.com/7MW2H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7MW2H.png" alt="enter image description here" /></a></p>
  <p>Thank you so much for your tests.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;title&gt;HTML CSS JS&lt;/title&gt;
        &lt;!-- CSS only --&gt;
        &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;h1 id="welcome"&gt;HTML CSS JS&lt;/h1&gt;
        &lt;div class="col-12 col-md-6 col-lg-3"&gt;
           &lt;div class="form-group "&gt;
              &lt;label for="date"&gt;Start date&lt;/label&gt;
              &lt;div class="input-group"&gt;
                 &lt;input name="beginDate" id="beginDate" type="text" class="form-control"
                 style="background-color: white;"
                 (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate"&gt;
                 &lt;input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
                 ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
                 (ngModelChange)="changedBeginDate($event)"
                 style="position: absolute; left: 0; visibility: hidden"&gt;
                 &lt;div class="input-group-append" (click)="dp1.toggle()"&gt;
                    &lt;span class="input-group-text" id="basic-addon2"&gt;
                    &lt;i class="icon-regular i-Calendar-4"&gt;&lt;/i&gt;
                    &lt;/span&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
       
       &lt;div class="col-12 col-md-6 col-lg-3"&gt;
     &lt;div class="form-group form-inline"&gt;
        &lt;label for="date"&gt;End date&lt;/label&gt;
        &lt;div class="input-group"&gt;
           &lt;input name="beginDate" id="beginDate" type="text" class="form-control"
           style="background-color: white;"
           (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate"&gt;
           &lt;input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
           ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
           (ngModelChange)="changedBeginDate($event)"
           style="position: absolute; left: 0; visibility: hidden"&gt;
           &lt;div class="input-group-append" (click)="dp1.toggle()"&gt;
              &lt;span class="input-group-text" id="basic-addon2"&gt;
              &lt;i class="icon-regular i-Calendar-4"&gt;&lt;/i&gt;
              &lt;/span&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
       
   
     &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>