三个子元素在同一个父元素div下，在保证子元素在同一行的状态下，中间元素宽度自适应。

Question

响应式页面内，

三个子元素分别是段落、段落、按钮。三个子元素都没有用新的div包裹。

我用display：inline-block让他们保持在同一行内，中间元素宽度只会根据文本内容自适应。我该如何让它填满剩下的父元素空间。

下面是body的代码：

<div id="login-home" style="height:50px; background-color:red; color:grey; font-size:12px; line-height:50px;">

     <p  style="display: inline-block;">2131231231231</p>

    <p style="color:grey; font-size:12px; line-height:50px; text-align:right; display: inline-block;">111111111111111111111111111111111111</p>

     <button style="display: inline-block; height:50px; width:50px; float:right; " >退出</button>

我想让第二个段落右对齐按钮该怎么做