How can I inline the label with the input horizontally and the inputs vertically

My problem is that I cannot inline the label with the input horizontally and the inputs vertically

I wish to have an output like this:

But I'm using a table on this. Now I want not to use table but I dont know how to do it. I try to make but it is very wrong.

Here's my css

   article#login, article#register {
    padding:5px 0 5px;
    border:1px solid black;
    margin:0 auto;

And here's my html

<section id="siteContent" class="tabs">
    <article id="login">
        <input type="email">
        <input type="password">
        <input type="button" value="Login">
    <article id="register">
        <input type="text">
        <input type="email">
        <input type="password">
        <input type="password">


As far as I am aware, there is no true way to achieve horizontal and vertical alignment without a table.(I was just proven wrong by @TimMedora) However, if you want your input boxes to appear on the same line as the label, you're going to want to adjust their size. They are currently larger than your box, and thus get pushed around by the other elements. Once you do this however, you'll still want to apply the following css(or something similar) so your elements stay on their individual lines:

label {
    display: inline-block;


Need Your Help

Scraping html tables in .NET and taking care of colspans

c# .net html-parsing html-table

I am trying to scrape HTML tables in my .NET application, however I came across tables that are aggressively using colspan and rowspan attributes on cells causing me headache. I was wondering if t...

TimeZoneInfo bug in .net 4.5

c# .net datetime

I have recently updated my os with .net 4.5 framework and compiled all my applications using it.