title: float to right using angular material
body: <p>I have a md-card-content. Inside it i have a div and a md-card-content. 
  The contents of md-card-content(inner) i want to shift to the right. 
  I used <code>padding-left= 50%</code> but it goes out of page if text in first div is lengthier. 
  I also used 
  <code>layout-align="end start"</code> but it is not working.</p>
  
  <pre><code>  &lt;md-card&gt;
    &lt;md-card-content layout="row"&gt;       
           &lt;div layout="column"&gt;
              &lt;div&gt;
              &lt;md-icon md-svg-icon="extraIcons:offline" class="md-24"&gt;&lt;/md-icon&gt;
               &lt;span class="md-subhead"&gt;{{vm.device.serialNumber}}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div&gt;
               &lt;md-icon md-svg-icon="extraIcons:offline" class="md-24"&gt;&lt;/md-icon&gt;
              &lt;span class="md-subhead"&gt;{{vm.device.ipAddress}}&lt;/span&gt;  
              &lt;/div&gt;         
           &lt;/div&gt;
  
           &lt;md-card-content class="layout-row layout-align-end-start"&gt;
               &lt;div&gt;
                  &lt;md-icon md-svg-icon="extraIcons:{{vm.device.connectionStatus|lowercase}}" class="md-24 "&gt;&lt;/md-icon&gt;
               &lt;/div&gt;
               &lt;div&gt;
                   &lt;md-icon md-svg-icon="extraIcons:{{vm.device.operationalStatus|lowercase}}" class="md-24 {{vm.device.operationalStatus|lowercase}} "&gt;&lt;/md-icon&gt;
               &lt;/div&gt;
      &lt;!--
      &lt;div&gt;
          &lt;md-icon md-svg-icon="extraIcons:{{vm.device.overallStatus|lowercase}}" class="md-24 {{vm.device.overallStatus|lowercase}} "&gt;&lt;/md-icon&gt;
      &lt;/div&gt;
      --&gt;
                &lt;div ng-if="vm.device.requiresMaintenance"&gt;
                   &lt;md-icon md-svg-icon="extraIcons:maintenance" class="md-24 maintenance"&gt;&lt;/md-icon&gt;
                &lt;/div&gt;
           &lt;/md-card-content&gt;
        &lt;/md-card-content&gt;
        &lt;/md-card&gt;
  </code></pre>