Align Input text fields next to each other

Question

I have the following HTML layout:

<div class="editor-page">
  <div class="container page">
    <div class="row">
      <div class="col-md-10 offset-md-1 col-xs-12">

        <list-errors [errors]="errors"></list-errors>

        <form [formGroup]="articleForm">
          <fieldset [disabled]="isSubmitting">

            <fieldset class="form-group">
              Organization Name<input class="form-control"
                formControlName="orgName"
                type="text"
                placeholder="Enter a valid organization name*" />
            </fieldset>

            <fieldset class="form-group">
              Description<input class="form-control"
                formControlName="orgDescription"
                type="text"
                placeholder="What's this PowerPlant about?" />
            </fieldset>

            <fieldset class="form-group">
              Minimum Power in kw<input class="form-control"
                formControlName="minPower"
                type="text"
                placeholder="Minimum power capacity in kw" />
              Maximum Power in kw<input class="form-control"
                formControlName="maxPower"
                type="text"
                placeholder="Maximum power capacity in kw" />
            </fieldset>

            <fieldset class="form-group">
              <textarea class="form-control"
                formControlName="body"
                rows="8"
                placeholder="Write your article (in markdown)">
              </textarea>
            </fieldset>

            <fieldset class="form-group">
              <input class="form-control"
                type="text"
                placeholder="Enter tags"
                [formControl]="tagField"
                (keyup.enter)="addTag()" />

              <div class="tag-list">
                <span *ngFor="let tag of article.tagList"
                  class="tag-default tag-pill">
                  <i class="ion-close-round" (click)="removeTag(tag)"></i>
                  {{ tag }}
                </span>
              </div>
            </fieldset>

            <button class="btn btn-lg btn-primary" type="button" (click)="submitForm()">
              Add New PowerPlant
            </button>

          </fieldset>
        </form>

      </div>
    </div>
  </div>
</div>

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.

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:

        <fieldset class="form-group">
          Minimum Power in kw<input class="form-control"
            formControlName="minPower"
            type="text"
            placeholder="Minimum power capacity in kw" />
          Maximum Power in kw<input class="form-control"
            formControlName="maxPower"
            type="text"
            style='width:20em'
            placeholder="Maximum power capacity in kw" />
        </fieldset>

As you can see above, I added the

style='width:20em; float:left'

Which sort of got me the effect I wanted, but still not enough!

EDIT: Based on the reply to use form-inline, here is a screenshot of what I get:

EDIT 2: Here is how the new layout looks with the update from the answers below:

Answer 1

You can better stick with the default bootstrap classes instead of creating css hacks.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <fieldset class="form-group col-xs-6">
    <label>Minimum Power in kw</label>
    <input class="form-control"
      formControlName="minPower"
      type="text"
      placeholder="Minimum power capacity in kw" />
      </fieldset>
    <fieldset class="form-group col-xs-6">
    <label>Maximum Power in kw</label>
    <input class="form-control"
      formControlName="maxPower"
      type="text"
      placeholder="Maximum power capacity in kw" />
  </fieldset>
</div>

Answer 2

Input field by default has display property of block what means is you cannot put an element right next to it . The other element will start at next line. What you can do i set the display property of input to inline like HTML

<label>Minimum  power</label>
<input class="inline" type="number">
<label>Maximum power</label>
<input class="inline" type="number">

CSS

.inline{
display : inline;
}

Answer 3

Ok! This is what I did to solve it:

Added the following to my css:

.form-min-max-power-input {
   width:43%;
   float:left; }

Used this in my div that shows the min and max power input fields!

<fieldset class="form-group"><div class="form-min-max-power-input">
          Minimum Power in kw<input class="form-control"
            formControlName="minPower"
            type="text"
            placeholder="Minimum power capacity in kw" /></div><div class="form-min-max-power-input">
          Maximum Power in kw<input class="form-control"
            formControlName="maxPower"
            type="text"
            placeholder="Maximum power capacity in kw" /></div>
        </fieldset>