位置2并排流体/响应（未知宽度）

Question

我正在工作中的一个React项目（我们公司为我们提供了全职职位）。

我有一个包装器div，里面还有另外2个divs。

这是div的作用：

[Left Div-（文本span，还包含省略号和隐藏的溢出，变量div宽度），因此父级div的宽度必须适合文本内容。]]
Right Div-（排序图标），排序图标必须粘贴在左侧div的右侧并填充parent div的其余空间，尽管该图标必须粘贴在标题旁边随时显示文字[缩放友好]。

这里是我想要的图像：

这是我所拥有的：

这是我的html：

return (
    <>
        <div className={classes.headerWithSort}>
            <span>{col.label}</span>
            {canSort ? (
                <div>{sortIcon}</div>
            ) : null}
        </div>
    </>
);
这是我的JSX / CSS：

headerWithSort: {
    position: 'relative',
    border: '1px dashed black',
    height: 'inherit',
    width: 'inherit',
    '& > span': {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        lineHeight: '3.29rem',
        border: '1px dashed green',
        float: 'left'
    },
    '& > div': {
        border: '1px dashed red',   
        overflow: 'hidden'
    },
    '& > *': {
        height: 'inherit'
    }
},
[编辑]-我想要的另一个示例：

我已经坚持了很长一段时间，不胜感激，谢谢。

我正在工作中的一个React项目（我们公司为我们提供了全职职位）。我有一个包装div，里面还有另外2个div。 div的操作如下：Left Div-（Text span，...