Untitled

<!DOCTYPE html>

<html>
	<head>
		<style>
		html {
			font-family: Arial;
		}
		.shorten-options {
			position: absolute;
			top: 160px;
			left: 650px;
			width: 680px;
		}

		input[type="text"], .shorten-button {
			border: 1px solid black;
		}

		.url-input, .custom-input {
			font-size: 45px;
			margin-bottom: 4px;
			padding-left: .2em;
			padding-right: .2em;
		}
		.url-input, .shorten-button, .custom-input {
			box-sizing: border-box;
		}
		.url-input {
			height: 60px;
			width: 100%;
			padding-right: 125px;
		}
		.shorten-button {
			position: absolute;
			top: 0;
			right: 0;
			height: 60px;
			width: 120px;

			padding: 1px 5px 1px 5px;
			font-size: 200%;
			box-shadow: none;
			background-color: rgb(100, 200, 100);
			color: white;
			-webkit-appearance: none;
		}
		.shorten-button:focus {
			outline-color: rgb(0, 255, 0);
		}
		.shorten-button:hover {
			background-color: rgb(90, 190, 90);
			color: rgb(240, 240, 240);
		}
		.shorten-button:active {
			background-color: rgb(85, 180, 85);
			color: rgb(220, 220, 220);
		}
		.custom-input {
			height: 35px;
			width: 100%;
			font-size: 30px;
		}
		.custom-input-span {
			display: table-cell;
			width: 100%;
		}
		.site-name {
			font-size: 30px;
			display: table-cell;
			padding-right: 5px;
		}
		</style>
	</head>
	<body>
		<div class="shorten-options">
			<input type="text" placeholder="url to shorten" class="url-input" tabindex="1">
			<button class="shorten-button" tabindex="3">shorten</button>
			<br>
			<span class="site-name">urlmem.com/</span>
			<span class="custom-input-span">
				<input type="text" placeholder="optional custom url" class="custom-input" tabindex="2">
			</span>
		</div>
	</body>
</html>