Boostrap 3

by Sambora

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div style="margin:20px;" class="panel panel-default">
    <div class="panel-heading">
         <h3 class="panel-title">
                    <i class="icon-list"></i> Check point</h3>

    </div>
    <div class="panel-body">
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2 back">
                    <label class="col-sm-12 control-label">Title</label>
                </div>
                <div class="col-sm-10 back2">
                    <input type="text" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 back">
                    <label class="col-sm-12 control-label">Title</label>
                </div>
                <div class="col-sm-4 back2">
                    <input type="text" class="form-control" />
                </div>
                <div class="col-sm-2 back">
                    <label class="col-sm-12 control-label">Title</label>
                </div>
                <div class="col-sm-4 back2">
                    <input type="text" class="form-control" />
                </div>
            </div>
        </form>
    </div>
</div>

CSS

.form-group {
    border:1px solid #e1e1e1;
    margin-bottom:0;
    border-bottom:none;
}
.back {
    background-color:#f4f4f4;
    padding:12px;
    border-right:1px solid #e1e1e1;
}
.back2 {
    padding:5px;
}
.form-horizontal .control-label {
    text-align: left;
    padding-top:0;
}
.form-horizontal {
    padding:0 14px;
}
.form-group:last-child {
    border-bottom:1px solid #e1e1e1;
}
@media only screen and (max-width : 780px) {
    .back {
        border-right:none;
    }
}