Positioning submenu links in block level manner - css

Question

I have tried couple solutions, but nothing that is working as I intended so far. I just want the links to be in the same level of indentation and in a block level manner. I am trying to get this accomplish without using absolute positioning, otherwise it breaks the rest of the code. Any help would be appreciated.
body {
margin-left: 40px; }
.bookmarks {
border: 1px solid gray;
width: 200px; }
.bookmarks ul {
list-style-type: none; }
.link4 {
box-sizing: border-box;
display: inline-block;
background-color: pink; }
.link4 .left-side {
height: 100%;
width: 80%;
color: white;
background-color: blue;
float: left; }
.link4 .right-side {
height: 100%;
width: 20%;
background-color: yellow;
float: right; }
.second-menu li {
background-color: lightgreen; }
.last-menu li {
background-color: lightgray; }
/*# sourceMappingURL=test2.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="col-md-6">
<div class="bookmarks">
<ul class="nav top-menu" id="affix-ul">
<li class="link1">
<a href="#">
Some Text on link 1
</a>
</li>
<li class="link2">
<a href="#">
Some Text on link 2
</a>
</li>
<li class="link 3">
<a href="#">
Some Text on link 3
</a>
</li>
<li class="link4 active">
<div class="left-side">
<a href="#">
<span>Some Text on link 4</span>
</a>
</div>
<div class="right-side">
<a href="#" class="arrow-up" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne">
<i class="fa fa-chevron-down"> ^
</i>
</a>
</div>
<ul id="hiddenMenuOne" class="collapse second-menu">
<li>
Sublink1
</li>
<li>
Sublink2
</li>
<li>
This is a sublink3 with a bit more text
</li>
<li>
sublink4
</li>
<li>
sublink5
</li>
<li>
sublink6
</li>
<li class="second-level-menu wrapper">
<div class="left-side">
<a href="#" class="">
Last sublink on submenu
</a>
</div>
<div class="right-side">
<a href="#" class="second-dropdown" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuTwo">
<i class="fa fa-chevron-down">^
</i>
</a>
</div>
<ul id="hiddenMenuTwo" class="collapse last-menu">
<li>
Tertiary 1
</li>
<li>
Tertiary 2
</li>
<li>
Tertiary 3 with a second line
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>

Answer 1

Just in case anyone wants to know the answer. I just removed the padding-left of the li and added a height property to the uls