console
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website.">
<title>Responsive Side Menu – Layout Examples – Pure</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
</head>
<body>
<div id="layout">
<form class="pure-form">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<label for="default-remember">
<input type="checkbox" id="default-remember" /> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</legend>
<label for="stacked-email">Email</label>
<input type="email" id="stacked-email" placeholder="Email" />
<span class="pure-form-message">This is a required field.</span>
<label for="stacked-password">Password</label>
<input type="password" id="stacked-password" placeholder="Password" />
<label for="stacked-state">State</label>
<select id="stacked-state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="stacked-remember" class="pure-checkbox">
<input type="checkbox" id="stacked-remember" /> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
<div>
<form class="pure-form pure-form-aligned">
<div class="pure-control-group pure-u-1-2">
<label for="aligned-name">Username</label>
<input type="text" id="aligned-name" placeholder="Username" />
<span class="pure-form-message-inline">required.</span>
</div>
<div class="pure-control-group pure-u-1-2">
<label for="aligned-password">Password</label>
<input type="password" id="aligned-password" placeholder="Password" />
</div>
<div class="pure-control-group pure-u-1-2">
<label for="aligned-email">Email Address</label>
<input type="email" id="aligned-email" placeholder="Email Address" />
</div>
<div class="pure-control-group pure-u-1-2">
<label for="aligned-foo">Supercalifragilistic Label</label>
<input type="text" id="aligned-foo" placeholder="Enter something here..." />
</div>
<div class="pure-controls">
<label for="aligned-cb" class="pure-checkbox">
<input type="checkbox" id="aligned-cb" /> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>