title: CSS - Align label on the left side of the input field
body: <p>I am working on a complex form, that is a part of big project and I need to apply at least basic styling. This is where I am having problems with. I am not that good with CSS, I am just developer that does not have designer :(
  I have looked at the SO, and tried several approaches, and none of them gives me what I need.</p>
  
  <p>I have main div container. In it I have three types of elements:</p>
  
  <ul>
  <li>Case 1. label followed with input field</li>
  <li>Case 2. label followed with select</li>
  <li>Case 3. Two input boxes with minus and plus signs (to inc and dec the fields)
  This is what I have done so far.</li>
  </ul>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="main-container"&gt;
    //Case 1
    &lt;div&gt;
    &lt;label for="typeAttributes"&gt;Type: &lt;/label&gt;
    &lt;select id="typeAttributes" class="field"&gt;&lt;option  
    value="2"&gt;Company&lt;/option&gt;
    &lt;option value="4"&gt;Site&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div&gt;
   //Case 2
    &lt;label for="centralOrganization"&gt;Central Organization: &lt;/label&gt;
    &lt;input id="centralOrganization" class="field ui-autocomplete-input" 
    autocomplete="off" role="textbox" aria-autocomplete="list" &gt;
  &lt;/div&gt;
  //Case 3
  &lt;div class="input-wrapper"&gt;
   &lt;label for="AttributeIndexFrom"&gt; FROM &lt;/label&gt;
   &lt;input type="text" class="field inc-dec-input" name="index-from" 
   id="AttributeIndexFrom" value="0"&gt;
   &lt;div class="inc button"&gt;+&lt;/div&gt;
   &lt;div class="dec button"&gt;-&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="input-wrapper"&gt;
   &lt;label for="AttributeIndexTo"&gt; TO&lt;/label&gt;
   &lt;input type="text" class="field inc-dec-input" name="index-from" 
   id="AttributeIndexTo" value="0"&gt;
   &lt;div class="inc button"&gt;+&lt;/div&gt;
   &lt;div class="dec button"&gt;-&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And CSS:</p>
  
  <pre><code>.input-wrapper {
   display: inline-block;
   text-align: left;
   }
  </code></pre>
  
  <p>I can introduce my own classes for the css.
  I just need the simple, but in my case very complex for me. I need labels to be on the left side of the input and select boxes.
  And in the last case, I need those input boxes in the same line with the label in front, and minus/plus signs at the back.</p>
  
  <p>I have tried many ways that I found on SO, people with same issues. But none of the solutions gave me any result.</p>