Javascript 将div设置为剩余可用空间

我有一个父div和两个子div（child left和child right）。根据动态页面要求，右下角div将包含1或2个图标。左下div包含标题，还用作拖动操作的句柄。我不想设置宽度px或%（如下面的90%）。如何将child left div设置为在child right占用空间之后占用剩余的可用空间

<div id="parent"> 
    <div id="child-left" style="width:90%"> 
        This is my title
    </div>
    <div id="child-right"> 
        <i class="fa fa-cog"></i>
    </div>
</div>

这是我的头衔

---

谢谢

以下内容应该对您有所帮助：

HTML:

<div id="parent">
    <div id="child-right">Hey</div>
    <div id="child-left">This is my title</div>
</div>

#child-left {
    border: 3px solid gray;
    background-color:blue;
    margin-left:0px;
    overflow:hidden;
}
#child-right {
    float:right;
    border-style:solid;
}
#parent {
    overflow:hidden;
}

---

请同时发布您的css，或者更好的做法是制作一个。css可以稍微影响答案。非常好，谢谢！我想这里的关键是定义孩子的权利，使其呈现之前，孩子左…真棒！