console
$(function(){
$('.list li').each(function(){
$(this).children('.btn-wrapper').height($(this).height());
});
})
<ul class='list'>
<li class='clear'>
<span class="left txt">我是列表文字</span>
<div class="btn-wrapper right"><span class="btn">我是按钮</span></div>
</li>
<li class='clear'>
<span class="left txt">我是列表文字我是列表文字我是列表文字我是列表文字我是列表文字我是列表文字我是列表文字我是列表文字我是列表文字我是列表文字</span>
<div class="btn-wrapper right"><span class="btn">我是按钮</span></div>
</li>
<li class='clear'>
<span class="left txt">我是列表文字</span>
<div class="btn-wrapper right"><span class="btn">我是按钮</span></div>
</li>
</ul>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
.right{
float: right;
}
.left{
float: left;
}
.clear{
*zoom:1;
}
.clear:after{
visibility:hidden;
content:"";
display:block;
clear:both;
height:0;
}
.list{
width: 500px;
border: 1px solid #ccc;
padding: 12px;
font-size: 14px;
}
.list li{
margin-bottom: 12px;
background: pink;
padding: 12px;
position: relative;
}
.list li .txt{
display: inline-block;
width: 80%;
padding: 8px 0;
}
.list li .btn-wrapper{
width: 20%;
text-align: center;
position: relative;
height: 100%;
}
.list li .btn{
cursor: pointer;
border:1px solid #3a8eff;
border-radius: 5px;
color: #3a8eff;
padding: 10px;
}
.list li .btn-wrapper:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}