So, I went a completely separate route form everybody else. First, here is my example of what I think you want but let me know if this is not correct.
DEMO
Now, let me break it down a bit for you. I first started by taking what you said with a login and having some type of header along with a login table by or on the same line. This was done via the HTML code below:
<div id="wrapper">
<h1 style="float:left;"> Example Text </h1>
<form action="" method="post">
<ul id="regis_ul">
<li id="regis_li">
<label><span> Username: </span>
<span><input type = 'text' name ='username' id ='username' value = ></span>
</label>
</li>
<li id="regis_li">
<label> <span> Password: </span>
<span><input type = 'password' name ='password' id ='password' value ='' ></span>
</label>
</li>
<input type='submit' name='submit' value='Register'>
</form>
</div>
Which is then accompanied by some CSS code:
#regis_ul {
display:table;
}
#regis_li {
display:table-row-group;
}
span {
display: table-cell;
}
label {
display: table-row;
}
form{
float: right;
}
The above code is what produced the JsFiddle output. Something to read into is the display method "table" that will tell you more about why this CSS trick actually works. This can be found in the Almanac.
Another thing that is good to read up on is why exactly a list may be better than a table which.. a great argument with pros and cons is found in this stack question here.
Finally, I encourage you to play with any of the JsFiddle's on this page, you may end up finding a perfect combination that really suites what you are looking for, giving you that unique feel :) If you have any questions about my Demo, just comment below and I will try my best to answer it for you :)
