自定义按钮，当我切换到另一种语言时，它不想正常工作

Question

我正在尝试创建一个像这样的按钮。这个按钮在英文版本中已经可以正常工作，但是当我切换到法语时，它会中断。法语文本更长，按钮分为两个独立的部分。我有什么想法可以创建一个“响应”（文本大小相对）按钮？ 我的代码：

<div class="row-fluid">
        <div class="text-box text-center"><p>View By</p></div>
        <div class="btn-group pull-right small-tab" style="padding-right:20px">         
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="fa fa-bars"></span>
            </button>
            <ul class="dropdown-menu pull-right">
                <li </li>
                <li </li>
                <li </li>
            </ul>
        </div>
</div>



 .text-box {
    display: inline-block;
    height: 27px;
    min-width: 70px;
    border: 1px solid #c2c2c2;
    border-radius: 3px 0 0 3px;
    font-size: 14px;
    padding: 1px 0 0 0;
    margin-right: -1px;
    text-align: center;
    margin-left: 225px;

    p {
        margin-top: 5px;
    }
}



 .small-tab {
    .btn:first-child {
        border-radius: 0px 3px 3px 0px;
    }
}

    .btn-group.open .btn.dropdown-toggle {
    background-color:#1388e2;
}

.btn {
    color:#ffffff;
    background-color:#46a9f8;
    border: none;   
}
    .btn:hover {
        color:#ffffff;
        background-color:#128ded;
    }