Label and Input in one line.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="MyTestPage">
<div data-role="header" data-position="fixed" data-logo="true" data-tap-toggle="false" data-fullscreen="false" >
<h1> Page Title </h1>
</div>
<div data-role="content">
<div class="content-primary divcontent">
<h1 class='h1title'>Using This App</h1>
<p> Here are the instructions </p>
</div>
<div class="container">
<label for="AccessCode"> Access Code: </label>
<input type="text" name="accessCode" id="AccessCode" value="" placeholder="" />
<div class="clear"></div>
</div>
<br/>
<input type="button" id="myalert" value="Next" />
</div>
<!-- /content -->
</div>
</body>
</html>
CSS
.container label.ui-input-text {
float: left;
width: 23%
}
.container input.ui-input-text {
float: left;
width: 72%;
}
.inputdata {
border: thin solid red;
padding: 0.1em;
margin: 0.1em;
vertical-align: middle;
}
div .inputdata label {
// display: inline;
width:auto;
float:left;
color: yellow;
line-height: 2;
padding-top: .4em;
}
div .inputdata input[type='text']{
overflow:hidden;
line-height: 2;
box-shadow: none;
border:none;
vertical-align: middle;
background:none;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size:0pt;
margin-top: -1px;
}