Выравнять лейблы стилями

[mstdmstd]

 Подскажите, пожалуйста, в совсем простых блоках с инпутомами и лейблами к ним хочется чтобы все лейблы лежали 1) сверху над инпутами или 2) на одной строке, причем, чтобы все лейблы были одной ширины
и их инпуты таким образом вырравнивались слева. Причем, чтобы поведение выше изменялось без изменения в коде, а одним css-кодом.
Верстка:

<div class="form-artist_song-field form-require term-site-wrap ">  <div class="for_input_label">     <label for="artist_site">Site</label>   </div>  <input type="text" size="50" maxlength="50" name="artist_site" id="artist_site" value="" aria-required="true">   <p>Site of artist. Required and must be valid u"></p></div>

Для случая 1) стили

.for_input_label {  width: 300px;  min-width: 300px;  /* display: inline; */  border: 2px solid red;}

работают ok.
Я полагал, что для случая 2) достаточно раскоментарить код display: inline;
но нет, ширина всех лейблов нефикисрована и инпуты невыравнены. А как правильно ?   

[Светлана Г.]

Обычно, каждое поле ввода вместе с label заключают в отдельный div или p.

Не нужно label заключать в div.

label по умолчанию имеет display:inline. Чтобы он был над полем ввода, нужно сделать его блочным.

А чтобы все label имели одинаковую ширину и были на одной строке с полем ввода -  задать им display:inline-block и  нужную ширину.

 

Может понадобиться еще и vertical-align.