I am dealing with a situation in which I have an md-card-content element. Inside it, there is a div and another md-card-content element. The challenge I am facing is that I want to move the contents of the inner md-card-content to the right. I tried using padding-left: 50%, but if the text in the first div is too long, it goes off the page. I also attempted to use layout-align="end start", but unfortunately, it did not work as expected.
<md-card>
<md-card-content layout="row">
<div layout="column">
<div>
<md-icon md-svg-icon="extraIcons:offline" class="md-24"></md-icon>
<span class="md-subhead">{{vm.device.serialNumber}}</span>
</div>
<div>
<md-icon md-svg-icon="extraIcons:offline" class="md-24"></md-icon>
<span class="md-subhead">{{vm.device.ipAddress}}</span>
</div>
</div>
<md-card-content class="layout-row layout-align-end-start">
<div>
<md-icon md-svg-icon="extraIcons:{{vm.device.connectionStatus|lowercase}}" class="md-24 "></md-icon>
</div>
<div>
<md-icon md-svg-icon="extraIcons:{{vm.device.operationalStatus|lowercase}}" class="md-24 {{vm.device.operationalStatus|lowercase}} "></md-icon>
</div>
<!--
<div>
<md-icon md-svg-icon="extraIcons:{{vm.device.overallStatus|lowercase}}" class="md-24 {{vm.device.overallStatus|lowercase}} "></md-icon>
</div>
-->
<div ng-if="vm.device.requiresMaintenance">
<md-icon md-svg-icon="extraIcons:maintenance" class="md-24 maintenance"></md-icon>
</div>
</md-card-content>
</md-card-content>
</md-card>