title: Align Input text fields next to each other
body: <p>I have the following HTML layout:</p>
  
  <pre><code>&lt;div class="editor-page"&gt;
    &lt;div class="container page"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-10 offset-md-1 col-xs-12"&gt;
  
          &lt;list-errors [errors]="errors"&gt;&lt;/list-errors&gt;
  
          &lt;form [formGroup]="articleForm"&gt;
            &lt;fieldset [disabled]="isSubmitting"&gt;
  
              &lt;fieldset class="form-group"&gt;
                Organization Name&lt;input class="form-control"
                  formControlName="orgName"
                  type="text"
                  placeholder="Enter a valid organization name*" /&gt;
              &lt;/fieldset&gt;
  
              &lt;fieldset class="form-group"&gt;
                Description&lt;input class="form-control"
                  formControlName="orgDescription"
                  type="text"
                  placeholder="What's this PowerPlant about?" /&gt;
              &lt;/fieldset&gt;
  
              &lt;fieldset class="form-group"&gt;
                Minimum Power in kw&lt;input class="form-control"
                  formControlName="minPower"
                  type="text"
                  placeholder="Minimum power capacity in kw" /&gt;
                Maximum Power in kw&lt;input class="form-control"
                  formControlName="maxPower"
                  type="text"
                  placeholder="Maximum power capacity in kw" /&gt;
              &lt;/fieldset&gt;
  
              &lt;fieldset class="form-group"&gt;
                &lt;textarea class="form-control"
                  formControlName="body"
                  rows="8"
                  placeholder="Write your article (in markdown)"&gt;
                &lt;/textarea&gt;
              &lt;/fieldset&gt;
  
              &lt;fieldset class="form-group"&gt;
                &lt;input class="form-control"
                  type="text"
                  placeholder="Enter tags"
                  [formControl]="tagField"
                  (keyup.enter)="addTag()" /&gt;
  
                &lt;div class="tag-list"&gt;
                  &lt;span *ngFor="let tag of article.tagList"
                    class="tag-default tag-pill"&gt;
                    &lt;i class="ion-close-round" (click)="removeTag(tag)"&gt;&lt;/i&gt;
                    {{ tag }}
                  &lt;/span&gt;
                &lt;/div&gt;
              &lt;/fieldset&gt;
  
              &lt;button class="btn btn-lg btn-primary" type="button" (click)="submitForm()"&gt;
                Add New PowerPlant
              &lt;/button&gt;
  
            &lt;/fieldset&gt;
          &lt;/form&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this, I want to place the input types for Minimum Power and Maximum Power in the same line. Right now they come one after the other. I tried adding a div to those input types, but it did not take any effect.</p>
  
  <p>Any ideas as to how I could place them next to each other? The closest I got was to reduce the size of the inout type by adding a style like this:</p>
  
  <pre><code>        &lt;fieldset class="form-group"&gt;
            Minimum Power in kw&lt;input class="form-control"
              formControlName="minPower"
              type="text"
              placeholder="Minimum power capacity in kw" /&gt;
            Maximum Power in kw&lt;input class="form-control"
              formControlName="maxPower"
              type="text"
              style='width:20em'
              placeholder="Maximum power capacity in kw" /&gt;
          &lt;/fieldset&gt;
  </code></pre>
  
  <p>As you can see above, I added the</p>
  
  <pre><code>style='width:20em; float:left'
  </code></pre>
  
  <p>Which sort of got me the effect I wanted, but still not enough!</p>
  
  <p>EDIT: Based on the reply to use form-inline, here is a screenshot of what I get:
  <a href="https://i.stack.imgur.com/CXhXb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CXhXb.png" alt="enter image description here"></a></p>
  
  <p>EDIT 2: Here is how the new layout looks with the update from the answers below:</p>
  
  <p><a href="https://i.stack.imgur.com/b8Cip.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b8Cip.png" alt="enter image description here"></a></p>