title: Inline form in one row with labels above input fields
body: <p>I'm building a web app using angularjs and bootstrap 3 as a css (I have very limited knowledge of css). I'd like to create an inline form with 5 input fields and labels to be positioned on top of them. First field needs to occupy more space than the others.</p>
  
  <p>I have a plnkr with my attempt here: <a href="http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview" rel="noreferrer">http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview</a></p>
  
  <p>And here is the markup with what I tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;form name="form" novalidate="" ng-submit="processForm()" class="form-inline"&gt;
  
    &lt;div class="form-group col-md-4"&gt;
      &lt;label class="control-label" for="location"&gt;&lt;i class="glyphicon glyphicon-map-marker"&gt;&lt;/i&gt; Location&lt;/label&gt;
      &lt;input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" /&gt;
    &lt;/div&gt;
    &lt;div class="form-group col-md-4"&gt;
      &lt;label class="control-label" for="startDate"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt; Pickup date&lt;/label&gt;
      &lt;input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" /&gt;
    &lt;/div&gt;
    &lt;div class="form-group col-md-3"&gt;
      &lt;label class="control-label" for="startTime"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt; Pickup&lt;/label&gt;
      &lt;select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true"&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="form-group col-md-4"&gt;
      &lt;label class="control-label" for="endDate"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt; Dropoff date&lt;/label&gt;
      &lt;input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"
      /&gt;
    &lt;/div&gt;
    &lt;div class="form-group col-md-3"&gt;
      &lt;label class="control-label" for="endTime"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt; Dropoff&lt;/label&gt;
      &lt;select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true"&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="row align-center"&gt;
      &lt;input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" /&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is how the current plnkr renders the markup:
  <img src="https://i.stack.imgur.com/d4tQi.png" alt="Current state"></p>