Creating the layout and style of a modal - css

Question

I am on the way and trying to create a modal's design like this.
Hence I begin by creating a layout first by selecting the elements that I like. However I got a question which is how do I create lines like this? Do I create a fake div so that the lines won't get there?
The lines
HTML
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
New entry
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<span class="tc">New Note</span>
<button type="button" class="close" data-dismiss="modal">Add</button>
</div>
<div class="modal-body">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Note
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Image
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Voice
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Video
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Data
</label>
</div>
</div>
<div class="modal-footer">
<div class="input-group">
<span class="input-group-addon">Episode:</span>
<input type="text" class="form-control" placeholder="Choose a episode">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Info</button>
</span>
</div>
<div class="input-group">
<span class="input-group-addon">Episode:</span>
<input type="text" class="form-control" placeholder="Choose a episode">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Info</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Write here">
</div>
</div>
</div>
</div>
</div>
CSS
.tc{
margin-left:192px;}
Thanks for taking your time!

Answer 1

If I fully understanded, correct me if I am wrong, you want something like this:
http://jsfiddle.net/VDesign/9cuxr59y/
CSS Code
.tc{
margin-left:192px;}
.input-group-addon {
background-color: #fff;
border: none;
border-radius: none;
}
.form-control, .form-control:focus {
background-color: #fff;
box-shadow: none;
border: none;
}
.input-group + .input-group {
border-top: 1px solid #ccc;
}
.input-group {
width: 100%;
padding: 7px;
}
.btn-default {
border-radius: 100%;
color: #3071A9;
border: 1px solid #3071A9;
}
.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
border-bottom-left-radius: 100%;
border-top-left-radius: 100%;
}
.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
margin-left: 0;
}