Inline Editing / jQuery /

by asdf

HTML

<div class = "wrap">
		<div id = "personal-info" class = "info-block">
			<input type = "button" value = "Edit" />
			<dl class = "form">
				<dt>Full Name:</dt>
				<dd name = "name">Ivan Ivanov</dd>
				<dt>Adress:</dt>
				<dd name = "address">1 Main St., Pleasanton, CA 94588</dd>
			</dl>
			<input type = "button" value = "Save" />
			<input type = "button" value = "Cancel" />
		</div><div id = "login-info" class = "info-block">
			<input type = "button" value = "Edit" />
			<dl class = "form">
				<dt>Login name:</dt>
				<dd name = "login">ivanov</dd>
				<dt>Password:</dt>
				<dd name = "password">********</dd>
			</dl>
			<input type = "button" value = "Save" />
			<input type = "button" value = "Cancel" />
		</div>
	</div>

CSS

.wrap {
	display: table;
    width: 100%;
}
.info-block {
    background-color: #cecece;
    width: 50%;
    display: table-cell;
    padding: 5px;
    border: 5px solid #ffffff;
}
.info-block input[type = "button"] {
    padding: 15px;
}