Ярлык, Вход - общая площадь (класс/div)

Question

У меня довольно простая вещь, но я не могу найти выход.

скажем, я получил форму, я хочу добавить вход один под другим, однако рядом с одним из них будет ярлык (только рядом с одним из них).

Я хотел бы сделать это, поэтому все классы равного размера (но чтобы они реагировали). Тем не менее, я хотел бы сделать этот ввод с меткой рядом с ним, чтобы разделить пространство с меткой, поэтому он будет рядом друг с другом, а не под другим, если пользователь откроет это на маленьком экране.

надеюсь, что вы, ребята, поняли, что я имею в виду. : P

Спасибо!

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/

Вот код, который я получил, как сейчас. Проблема, с которой я сталкиваюсь, заключается в том, что помеченный ввод не прикреплен к левой стороне и ведет себя по-другому. я уверен, вы можете увидеть его лучше там, чем я объясню.

Answer 1

Вам нужно добавить отображение: встроенный блок и ширину к метке и элементу ввода, который вы хотите в той же строке.

.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; 
} 

Это как вы этого хотели? jsfiddle

Answer 2

Пожалуйста, удалите свойство CSS ниже:

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

Изменение ниже CSS:

.mainbox-input input[name=store-subdomain]{ 
    max-width:100%; 
} 
.mainbox-input input{ 
    width:auto; 
    display:table 
} 
.mainbox-input label{ 
    display: table; 
    padding: 0px 40px; 
} 

Посетите этот URL: http://jsfiddle.net/sarowerj/e41653o4/