Align a div and a label horizontally

Question

I have a asp.net form that contains tags.I want to align a label side by side that div horizontally.But i cant manage what i do.I have added my code snippet below.Can you help me please?

My Code Snippet

 <div class="modal" id="passwordModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Şifre Değiştirme</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="inputPassword">Şifreniz</label> <input class="form-control" runat="server" placeholder="Şuanki Şifreniz" type="password" id="inputPassword" /> </div> <div class="form-group"> <label for="inputNewPassword">Yeni Şifreniz</label> <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" /> </div> <label id="labelAlign">How Can i align this label near the div above</label> <div class="form-group"> <label for="inputNewPasswordAgain">Yeni Şifreniz Tekrar</label> <input class="form-control" runat="server" placeholder="Yeni Şifreniz Tekrar" type="password" id="inputNewPasswordAgain" /> </div> </div> <div class="modal-footer"> <asp:Button ID="btn_PasswordChange" class="btn btn-primary" runat="server" OnClick="btn_PasswordChange_Click" Text="Değiştir" /> <asp:Button ID="btn_PasswordClose" class="btn btn-primary" runat="server" data-dismiss="modal" Text="Kapat" /> </div> </div> </div> </div> 

Answer 1

Why not add the label class within the given div?

<div class="form-group">
<label for="inputNewPassword">Yeni Şifreniz</label>
<input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" />
<label id="labelAlign">How Can i align this label  near the div above</label>
</div>

Or add inline-block to the div:

<div class="form-group" style="display:inline-block">

Snippet:

 .trial { display: inline-block; } 

 <div class="modal" id="passwordModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Şifre Değiştirme</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="inputPassword">Şifreniz</label> <input class="form-control" runat="server" placeholder="Şuanki Şifreniz" type="password" id="inputPassword" /> </div> <div class="form-group trial"> <label for="inputNewPassword">Yeni Şifreniz</label> <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" /> </div> <label id="labelAlign">How Can i align this label near the div above</label> <div class="form-group"> <label for="inputNewPasswordAgain">Yeni Şifreniz Tekrar</label> <input class="form-control" runat="server" placeholder="Yeni Şifreniz Tekrar" type="password" id="inputNewPasswordAgain" /> </div> </div> <div class="modal-footer"> <asp:Button ID="btn_PasswordChange" class="btn btn-primary" runat="server" OnClick="btn_PasswordChange_Click" Text="Değiştir" /> <asp:Button ID="btn_PasswordClose" class="btn btn-primary" runat="server" data-dismiss="modal" Text="Kapat" /> </div> </div> </div> </div> 

Answer 2

Does this helps you?

 label{ width: 170px; position: relative; display: inline-flex; } input{ width: 180px; position: relative; display: inline-flex; } .modal-body{ position: absolute; } 

 <div class="modal" id="passwordModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Şifre Değiştirme</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="inputPassword">Şifreniz</label> <input class="form-control" runat="server" placeholder="Şuanki Şifreniz" type="password" id="inputPassword" /> </div> <div class="form-group trial"> <label for="inputNewPassword">Yeni Şifreniz</label> <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" /> </div> <div class="form-group"> <label for="inputNewPasswordAgain">Yeni Şifreniz Tekrar</label> <input class="form-control" runat="server" placeholder="Yeni Şifreniz Tekrar" type="password" id="inputNewPasswordAgain" /> </div> </div> </div> </div> </div>