<form class="form-horizontal" role="form">
<div class="wrapp-input row form-group">
<label for="CompanyName" class="col-sm-4 control-label" >Company Name</label>
<div class="col-sm-8">
<input type="name" class="form-control" id="CompanyName">
</div>
</div>
<div class="wrapp-input row form-group">
<label for="FirstName" class="col-sm-4 control-label" >First Name</label>
<div class="col-sm-8">
<input type="name" class="form-control" id="FirstName">
</div>
</div>
<div class="wrapp-input row form-group">
<label for="LastName" class="col-sm-4 control-label" >Last Name</label>
<div class="col-sm-8">
<input type="name" class="form-control" id="LastName">
</div>
</div>
<div class="wrapp-input row form-group">
<label for="Role" class="col-sm-4 control-label" >Role</label>
<div class="col-sm-8">
<input type="name" class="form-control" id="Role">
</div>
</div>
<div class="wrapp-textarea form-group row">
<label for="TellUs" class="col-sm-4 control-label">Tell us abot<br> your needs</label>
<div class="col-sm-8">
<textarea type="name" rows="6" class="form-control" id="TellUs"></textarea>
</div>
</div>
<div class="wrapp-textarea form-group row">
<label for="HowDid" class="col-sm-4 control-label">How did your hear<br>about us</label>
<div class="col-sm-8">
<textarea type="name" rows="6" class="form-control" id="HowDid"></textarea>
</div>
</div>
</form>
CSS
.form-horizontal .control-label{
display: inline-block;
width: 200px;
text-align: left;
padding-top: 5px;
cursor: pointer;
}
input{
float: right;
}
div.active:hover{
background-color: #558CFF;
cursor: pointer;
width: 500px;
}
.wrapp-input{
background-color: white;
border-radius: 8px;
height: 50px;
padding-top: 10px;
}
.wrapp-textarea{
background-color: white;
border-radius: 8px;
height: 150px;
padding-top: 10px;
}
.wrapp-input:hover{
background-color: #558CFF;
cursor: pointer;
color: #FFFFFF;
}
.form-control{
margin-top: -2px;
}
col-sm-*