title: Angular UI date picker error message in same line
body: <p><a href="http://plnkr.co/edit/3zbpZiItUrFg4n0SWzny?p=preview" rel="nofollow noreferrer">In this plunk</a> I have an Angular UI date picker with an error message that is displayed when the date is invalid. Problem is that the error message is shown below the date instead of the same line. How to fix this?</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;form name="form1" ng-submit="validate(form1)" novalidate&gt;
        &lt;p class="input-group" style="width:160px;margin-bottom:0px;"&gt;
            &lt;input type="text" class="form-control" ng-model="dtFrom" 
                 is-open="config1.opened"  uib-datepicker-popup="MM-dd-yyyy" 
                 close-text="Close" name="dtFrom" /&gt;
             &lt;span class="input-group-btn"&gt;
                 &lt;button type="button" class="btn btn-default" ng-click="open1($event)"&gt;
                    &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
                 &lt;/button&gt;
             &lt;/span&gt;
        &lt;/p&gt;
        &lt;div style="background-color:red;color:white;width:150px"
            ng-show="!form1.dtFrom.$valid"&gt;Invalid Date&lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
  
  app.controller('ctl', function ($scope) {
  
      $scope.dtFrom = new Date ();
  
      $scope.config1 = {};
      $scope.config1.opened = false;
      $scope.open1 = function(event){
           event.preventDefault();
           event.stopPropagation();
           $scope.config1.opened = true;
      };
  
  });
  </code></pre>