Angular Material Layout

by Shaxrillo

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="App" ng-controller="AppCtrl">
  <div layout="row" class="main">
    <div flex>
      <div>
        <div flex class="md-whiteframe-z1">
          <h4>Recipient information</h4>
          <div layout="row">
            <p flex class="md-more-info">Recipient Name: </p>
            <p flex class="md-more-info">Charles Noble</p>
          </div>
          <div layout="row">
            <p flex class="md-more-info">Phone Number: </p>
            <p flex class="md-more-info">123456789</p>
          </div>
          <div layout="row">
            <p flex class="md-more-info">Email: </p>
            <p flex class="md-more-info">[email protected]</p>
          </div>

        </div>
        <div flex class="md-whiteframe-z1 secondar-elm">
          <h4>	Destination address
				</h4>
          <div layout="row">
            <p flex class="md-more-info">Address Line 1: </p>
            <p flex class="md-more-info">POBOX 21379</p>
          </div>
          <div layout="row">
            <p flex class="md-more-info">Address Line 2: </p>
            <p flex class="md-more-info">Little Llonsdale street.</p>
          </div>
          <div layout="row">
            <p flex class="md-more-info">City: </p>
            <p flex class="md-more-info">Melburne</p>
          </div>
          <div layout="row">
            <p flex class="md-more-info">Country: </p>
            <p flex class="md-more-info">Australia</p>
          </div>
          <div layout="row">
            <p flex...

CSS

.main {
  background: #ffffff;
  margin: 0 auto;
}

img {
  max-width: 100%;
  width: 100%;
}

[md-dialog] {
  border-color: #000;
  z-index: 111;
}

.divider-dotted {
  width: 100%;
  display: inline-block;
  border-bottom: 3px dotted #eee;
}

[flex] {
  width: 100%;
  /* min-height: 80px; */
  /* border: 1px solid #eee; */
  margin: 0;
  text-align: center;
}

.md-whiteframe-z1 {
  /* margin:0; */
  box-shadow: none;
  border: 1px solid #eee;
  padding: 12px;
  min-height: 184px;
  text-align: left;
}

.secondar-elm {
  min-height: 420px;
}

.md-last-elm {
  width: 20px !important;
  min-width: 20px !important;
}

.md-more-info {
  height: auto;
  min-height: auto;
  display: inline-block;
  line-height: 18px;
  margin: 4px 0;
  text-align: left;
}

.md-m-2x {
  padding-top: 24px;
  padding-bottom: 18px;
}

.copy-tr {
  text-align: right;
  float: right;
}

.b-btn {
  
  /* top: 300px; */
  
}

JavaScript

angular.module('App', ['ngMaterial'])
  .controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
    $scope.test = "Test"
  })