layout with twitter-bootstrap form - css

Question

I have difficulties to arrange the css bootstrap form .
On top of the picture below is the layout I get and just under is the layout I would like to obtain:
http://s27.postimg.org/dfztgn35v/flow_Root3665.png
This is: the first column witn names aligned on their last letter, and aligned input fields on the left and on the right.
Here is the css I used:
<div class="well">
<form class="form-horizontal" method="post">
<fieldset>
<legend>Event</legend>
<div class="form-group">
<label for="input-append date" class="col-lg-1 control-label">Date</label>
<div class="col-lg-3">
<div class="input-group input-append date" id="startDatePicker">
<input type="text" class="form-control" name="datepicker" id="datepicker1" readonly style="background-color: white" /><span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<div class="form-group">
<label for="input-append type" class="col-lg-1 control-label">Type</label>
<div class="col-lg-2">
<select class="form-control" id="select">
<option>select1</option>
<option>select2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputTitle" class="col-lg-1 control-label">Title</label>
<div class="col-lg-6">
<input kl_virtual_keyboard_secure_input="on" class="form-control" id="inputTitle" placeholder="Title" type="text" maxlength="30">
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-1 control-label">Description</label>
<div class="col-lg-6">
<textarea class="form-control" rows="3" id="textArea" placeholder="Description" maxlength="200"></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
Thanks!

Answer 1

With some minor CSS you can acheive that. See example.
#soForm input,
#soForm select {
height: 50px;
font-size: 16px;
-webkit-border-radius: 0;
border-radius: 0;
border: 4px solid #444;
}
#soForm textarea {
font-size: 16px;
-webkit-border-radius: 0;
border-radius: 0;
border: 4px solid #444;
}
#soForm .input-group-addon {
height: 50px;
font-size: 13px;
-webkit-border-radius: 0;
border-radius: 0;
border-right: 4px solid #444;
border-top: 4px solid #444;
border-bottom: 4px solid #444;
}
.btn.btn-submit {
border-radius: 0;
height: 50px;
width: 100px;
border: 4px solid #444;
}
#media (min-width: 768px) {
#soForm .soForm {
margin: 10px auto;
}
#soForm .control-label {
margin-top: 25px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">
<div class="container">
<form id="soForm" name="soForm">
<div class="form-group">
<label for="date" class="col-sm-2 control-label">Date</label>
<div class="col-sm-5">
<div class="input-group soForm">
<input type="text" class="form-control" id="date" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
<div class="form-group">
<label for="type" class="col-sm-2 control-label">Type</label>
<div class="col-sm-3">
<select class="form-control soForm" id="type">
<option>select1</option>
<option>select2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title" />
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea class="form-control soForm" rows="5" id="desc"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default btn-submit">Submit</button>
</div>
</div>
</form>
</div>
</div>