<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
		<main class="mdl-layout__content mdl-grid">
			
			<div class="mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet product-image">
				<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/kung-fu.jpg" alt="" />
			</div>
			<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-tablet product-info">
				<h2 class="product-name">Acme Product</h2>
				<p class="product-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, eligendi, possimus. Perspiciatis nesciunt sunt facilis quaerat cupiditate voluptatibus incidunt vel deserunt delectus neque. Voluptas similique ratione doloribus possimus nemo minima!</p>
							<button class="mdl-button mdl-button--raised mdl-button--colored">Buy Now</button>
			</div>
		</main>
</div>
.mdl-layout__content {
	padding: 24px;
	flex: none;
}
.mdl-button {
	margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}
.product-image img {
	max-width: 100%;
	margin-top: 1rem;
}
.product-info {
	padding-left: 10px;
}
.product-name {
	font-size: 2rem;
	margin-top: 0;
	margin-bottom: 1rem;
}

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons
  2. https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css
  3. https://fonts.googleapis.com/css?family=Roboto:300,400,500,700

External JavaScript

  1. https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js