Untitled

dabblet.css

* { font-family: Arial; margin: 0; padding: 0; }

.sidebar {
	float:right;
	height: 400px;
	width: 50%;
	background-color: orange;
	padding: 10px;
}

.searchform, .test-form {
	font-size: 0;
	background-color: yellow;
	min-height: 20px;
	margin-bottom: 20px;
}

.searchfield, .test-field {
	width: 100%;
	display: block;
	font-size: 20px;
	background-color: pink;
	margin-right: 200px;
	border: 0;
	color: black;
}

.searchsubmit, .test-submit {
	font-size: 20px;
	width: 200px;
	float:right;
	background-color: lightgrey;
	text-align: center;
}

dabblet.html

<div class="sidebar">
	<h1>Search Form:</h1>
	<form  action="" class="searchform" method="get">
		<input type="submit" placeholder="Submit" class="searchsubmit" />
		<input type="text" class="searchfield" name="s" placeholder="type here" />
	</form>
	
	<h1>Search Div Mockup:</h1>
	<div class="test-form">
		<div class="test-submit">Submit</div>
		<div class="test-field">type here</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}