How to align the labels and form-field - html

Question

I want to align the labels and as well as text-fields in this way:
But the output I get from my code is this:
And my code is:
<span class="questions">Your Date of birth: </span>
<input type="date" placeholder="DOB"/><br>
<span class="questions">Which Country You Are In:</span>
<select>
<option selected disabled>Select Country</option>
<option>India</option>
</select><br>
<span class="questions">In which University You Are In:</span>
<select>
<option selected disabled>Select University</option>
<option>AKTU</option>
</select><br>
<span class="questions">In which College You Are In:</span>
<select>
<option selected disabled>Select Your College</option>
<option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
</select><br>
<span class="questions">Your Mobile Number: </span>
<input type="tel" placeholder="Mobile Number"/><br>
<button class="btn">Proceed to Feeds.</button>
What should I add to CSS so that I get the required output or can I add before the <span> tag to adjust as the output required. Can anyone help me in this.

Answer 1

Try this:
.questions{
width:50%;
text-align:right;
display:inline-block;
}
input{width:150px;}
select{width:150px;}
<span class="questions">Your Date of birth: </span>
<input type="date" placeholder="DOB"/><br>
<span class="questions">Which Country You Are In:</span>
<select>
<option selected disabled>Select Country</option>
<option>India</option>
</select><br>
<span class="questions">In which University You Are In:</span>
<select>
<option selected disabled>Select University</option>
<option>AKTU</option>
</select><br>
<span class="questions">In which College You Are In:</span>
<select>
<option selected disabled>Select Your College</option>
<option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
</select><br>
<span class="questions">Your Mobile Number: </span>
<input type="tel" placeholder="Mobile Number"/><br>
<div align="center"> <button class="btn">Proceed to Feeds.</button><div>

Answer 2

Use form-horizontal class in form tag
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Watch this in fullpage

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$( function() {
$( "#datepicker" ).datepicker({
beforeShow: function(){
$("#abc").css('line-height', '14em')
},
});
} );
function chngecss(){
$("#abc").css('line-height', 'unset');
$('#datepicker').Close();
}
</script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="dob">Your Date Of Birth :</label>
<div class="col-sm-5" id="abc">
<input class="form-control" type="text" id="datepicker" onblur="chngecss();" class="ui-datepicker" placeholder="DOB"/><br>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="country">In Which Country You Are In :</label>
<div class="col-sm-5">
<select class="form-control">
<option selected disabled>Select Your College</option>
<option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="mobno">Your Mobile Number :</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="mobno" placeholder="Enter Mobile Number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>