Label, Input - shared space (class/div)

Question

i got quite simple thing to do, but i can't find way out for that.

let's say i got form, i want to add inputs one below another, however next to one of them there will be label (only next to one of them).

I would like to make it, so all the classes are equal size (but to make it responsive). However, i would like to make that input with label next to it, to share the space with label, so it will be next to each other, not one under another if user would open that in little screen.

hope you guys got what i mean. :P

Thank you!

EDIT

<div class="mainbox-form">
    <form>
        <div class="mainbox-input">
            <input type="text" name="store-name" placeholder="Name"><br>
        </div>

        <div class="mainbox-input">
            <input type="text" name="store-subdomain" placeholder="Subdomain">
            <label name="store-subdomain">.label.here</label><br>
        </div>

        <div class="mainbox-input">
            <input type="email" name="store-email" placeholder="Email"><br>
        </div>

        <div class="mainbox-input">
            <input type="password" name="store-password" placeholder="Password"><br>
        </div>

    </form>
</div>


.mainbox-form
{
    text-align: center;
    max-width: 50%;
    min-width: 350px;
    margin: 0 auto 0 auto;
}

.mainbox-input label
{
    font-weight: bold;
    color: #606060;
}

.mainbox-input
{
    max-height: 57px;
}

.mainbox-input input 
{
    background: #f3f3f3;
    width: 80%;
    border: none;
    color: #606060;
    margin: 3px auto 3px auto;
    padding: 15px 40px;
    font-size: 18px;
}


.mainbox-input input[name=store-subdomain]
{
    max-width: 59%;
}

.mainbox-input input:focus
{
    outline: none;
}

.mainbox-input input:active
{
    outline: none;
}

http://jsfiddle.net/twjw113w/

Here's the code I've got as for now. The problem I have with it is that, the labeled input is not sticked to the left, and is behaving differently. i bet you can see it yourself better there, than I would explain it.

Answer 1

You need to add display: inline-block and width to the label and input element that you want on the same line.

    .mainbox-input label
{
    font-weight: bold;
    color: #606060;
    display:inline-block;
    width:35%;
}
.mainbox-input input[name=store-subdomain]
{
    max-width: 40%;
    display:inline-block;
}

Is this how you wanted it? jsfiddle