Position and height of elements inside li - css

Question

I currently have two problems with a list of links.
First of all I need to display
| button | | text | | button |
side by side in the li. First button left hand side, then the text and the 2nd button on the right hand side of the li. Both buttons need to have the same height as the text in the middle has.
BUT they must not be as high as the whole li is, because the li can contain more elements, like a submenu, and then it would become much to high.
Any ideas (aside from a table per li)?
Thanks a lot for any help. It does look so simple (and I guess it is) but I am really getting frustrated meanwhile cause I didn't get it done...
button {
border: solid 1px #ccc;
}
a {
display: inline-block;
margin-right: 0;
background-color: #ffffff;
margin-left: 0;
}
.btn-left {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 100%;
border-right: solid 1px #333;
}
.btn-right {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
border-left: solid 1px #333;
}
ul {
border: solid 1px #333;
list-style-type: none;
padding: 0;
}
li {
background-color: #ccc;
position: relative;
}
li a {
display: inline-block;
}
.clearfix {
clear: both;
}
<ul>
<li>
<button class="btn-left">Btn 1</button>
<a href="#">
Lorem ipsum dolur sit Link Lorem ipsum dolur sit Lorem ipsum dolur sit Link Lorem ipsum dolur sit Lorem ipsum dolur sit Link Lorem ipsum dolur sit
</a>
<button class="btn-right">Btn 2</button>
<!-- here can be other content, e.g. a submenu:
<ul class="sub-menu">
<li>Lorem ipsum</li>
<li>dolor sit</li>
</ul>
-->
</li>
</ul>