<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
		<main class="mdl-layout__content">
				<form action="#">
					<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
						<label class="mdl-button mdl-js-button mdl-button--icon" for="site-search">
								<i class="material-icons">search</i>
							</label>
							<div class="mdl-textfield__expandable-holder">
								<input class="mdl-textfield__input" type="search" id="site-search" />
								<label class="mdl-textfield__label" for="site-search">Search</label>
							</div>
						</div>
				</form>
		</main>
</div>
body {
	text-align: center;
}
.mdl-layout {
	align-items: center;
  justify-content: center;
}
.mdl-layout__content {
	padding: 24px;
	flex: none;
}

External CSS

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

External JavaScript

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