The width of the following form is not constrained properly when using Firefox. Instead it spans the whole screen although in Chrome it does not.
<form class="form-horizontal" role="form">
<legend class="righter">Legend</legend>
<div class="form-group">
<label for="title" class="col-lg-2 control-label">Title</label>
<div class="col-lg-4">
<input type="text" class="form-control" id="title" placeholder="..." />
</div>
</div>
<div class="form-group">
<label for="id" class="col-lg-2 control-label">UUID</label>
<div class="col-lg-4">
<input type="text" class="form-control" id="description" placeholder="..."/>
</div>
</div>
</form>
In JSFiddle it behaves similarly to Firefox: http://jsfiddle.net/dy5KP/1/
How can I make it look like in the following picture (except for the marks) and diminish the width of the inputs?